Используем Carousel

Пока есть настроение, решил описать вариант решения для карусели.



Инструменты: Bootstrap + Django

Про карусель написано здесь: http://getbootstrap.com/javascript/#carousel

Можно делать в любом приложении на любой странице. Не хочется делать копи-паст и хочется управляемости, поэтому используем модель в models.py:

class Visual(models.Model):
    class Meta:
        db_table = 'app_ideator_visuals'

    img = models.CharField(max_length=120, verbose_name='Файл картинки')
    title = models.CharField(max_length=120, verbose_name='Заголовок')
    body = models.TextField(verbose_name='Описание')
    alt = models.TextField(verbose_name='Подсказка')
    index = models.IntegerField(verbose_name='Индекс')

    def __unicode__(self):
        return self.title

Соответственно, в views.py делаем так:

def vision(request):
    visuals = Visual.objects.order_by('index').all()
    return render_to_response('vision.html', {'visuals': visuals})


В шаблоне vision.html делаем так:

{% load staticfiles %}
<div id="carousel-generic" class="carousel slide" data-ride="carousel" data-interval="20000">
 <ol class="carousel-indicators">
 {% for visual in visuals %}
 <li data-target="#carousel-generic" data-slide-to="{{ visual.index }}" {% ifequal visual.index 0 %}class="active"{% endifequal %}></li>
 {% endfor %}
 </ol>
 <div class="carousel-inner" role="listbox">
 {% for visual in visuals %}
 <div class="item{% ifequal visual.index 0 %} active{% endifequal %}" style="background-color:#000;">
 <img style="opacity:0.6; -moz-opacity:0.6; filter: alpha(opacity=60) black; -khtml-opacity: 0.6; -webkit-filter: url(#blur);
 filter: url(#blur); -webkit-filter: blur(3px); filter: blur(3px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
 -webkit-transition: 1s -webkit-filter linear; transition: 1s filter linear;" src="/static/img/{{ visual.img }}" alt="{{ visual.alt }}">
 <div class="carousel-caption">
 <h3> {{ visual.title }}</h3>
 <p> {{ visual.body }}</p>
 </div>
 </div>
 {% endfor %}
 </div>

 <a class="left carousel-control" href="#carousel-generic" role="button" data-slide="prev">
 <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
 <span class="sr-only">Сюда</span>
 </a>
 <a class="right carousel-control" href="#carousel-generic" role="button" data-slide="next">
 <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
 <span class="sr-only">Туда</span>
 </a>
</div>

{% endblock %}

Как всегда не забываем про makemigrations и migrate.

Нам понадобятся картинки. Их нужно, судя из шаблона положить в папку: /static/img/

Картинки все должны быть одинакового размера и желательно побольше, чтобы хорошо выглядели на экране.

Рассмотрим что делается в шаблоне vision.html. Есть желание разместить на слайдере картинку и текст, при этом картинка не должна перекрывать текст и должна создавать нужную атмосферу, для этого:

1. Делаем картинку в половину прозрачнее.
2. Делаем размытие.

И то и другое можно сделать с помощью CSS, что и сделано тут. Для блока div class=«item» устанавливаем черный фон:

style="background-color:#000;"

Для самой картинки img делаем прозрачность на 40% (с учетом всех браузеров) и размытие (также с учетом всех браузеров):

style="opacity:0.6; -moz-opacity:0.6; filter: alpha(opacity=60) black; -khtml-opacity: 0.6; -webkit-filter: url(#blur);
 filter: url(#blur); -webkit-filter: blur(3px); filter: blur(3px); filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3');
 -webkit-transition: 1s -webkit-filter linear; transition: 1s filter linear;"

У меня в основном шаблоне base.html подключается bootstrap.min.css и bootstrap.min.js, они нужны для работы карусели. Не забываем добавить в если не добавлено:

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>

Вот и все. Осталось набить базу данными.

Tags:
bootstrap 3, Carousel, django

You can't comment this post because its author is not yet a full member of the community. You will be able to contact the author only after he or she has been invited by someone in the community. Until then, author's username will be hidden by an alias.