Используем 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>

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