Адаптивный слайдер отзывов клиентов

Адаптивный слайдер, созданный при помощи CSS и jQuery.

Отзывы ваших клиент — один из мощнейших маркетинговых инструментов. Именно поэтому их отображение — очень важная задача.

client

В данном примере мы создадим адаптивный слайдер, где можно будет отобразить множество отзывов ваших клиентов. В нашем арсенале понадобится 2 плагина: FlexSlider для карусели и Masonry layout для сетки.

Структура

Весь слайдер поместим в элемент .cd-testimonials-wrapper. Сам элемент будет представлен в виде ненумерованного списка.

<div class="cd-testimonials-wrapper cd-container">
    <ul class="cd-testimonials">
        <li> 
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
            <div class="cd-author"> 
                <img src="/img/avatar-1.jpg" alt="Author image"> 
                <ul class="cd-author-info"> 
                    <li>MyName</li>
                    <li>CEO, AmberCreative</li>
                </ul>
            </div>
        </li>
        <li><!-- ... --></li>
        <li><!-- ... --></li> 
    </ul> <!-- cd-testimonials --> 
    <a href="#0" class="cd-see-all">See all</a>
</div> <!-- cd-testimonials-wrapper --> 

В элемент .cd-testimonials-all поместим всех клиентов.

<div class="cd-testimonials-all">
    <div class="cd-testimonials-all-wrapper">
        <ul> 
            <li class="cd-testimonials-item"> 
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit totam saepe iste maiores neque animi molestias nihil illum nisi temporibus.</p>
                <div class="cd-author"> 
                    <img src="/img/avatar-1.jpg" alt="Author image">
                    <ul class="cd-author-info"> 
                        <li>MyName</li>
                        <li>CEO, CompanyName</li> 
                    </ul>
                </div> <!-- cd-author -->
            </li>
            <li class="cd-testimonials-item"><!-- ... --></li>
        </ul>
    </div>	<!-- cd-testimonials-all-wrapper -->
    <a href="#0" class="close-btn">Close</a> 
</div> <!-- cd-testimonials-all -->

Стили

В CSS ничего сверхъестественного, разве что создание иконок. 2 стрелки для направления слайдов созданы с помощью псевдо элементов (::before и ::after):

.flex-direction-nav li {
    position: absolute; 
    height: 100%;
    width: 40px; 
    top: 0; 
} 
.flex-direction-nav li:first-child {
    left: 0;
}
.flex-direction-nav li:last-child {
    right: 0;
}
.flex-direction-nav li a {
    display: block;
    height: 100%;
    width: 100%;
    /* image replacement */ 
    overflow: hidden;
    text-indent: 100%; 
    white-space: nowrap;
    transition: background-color 0.2s;
}
.flex-direction-nav li a::before, .flex-direction-nav li a::after {
    /* left and right arrows in css only */
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 2px;
    height: 13px;
    background-color: white;
}
.flex-direction-nav li a::before {
    transform: translateY(-35px) rotate(45deg);
}
.flex-direction-nav li a::after {
    transform: translateY(-27px) rotate(-45deg);
}
.flex-direction-nav li:last-child a::before {
    transform: translateY(-35px) rotate(-45deg); 
}
.flex-direction-nav li:last-child a::after {
    transform: translateY(-27px) rotate(45deg);
}
.cd-testimonials-all {
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 100%;
    width: 100%;
    background-color: white;
    z-index: 2;
    visibility: hidden; 
    opacity: 0; 
    transition: opacity .3s 0s, visibility 0s .3s;
} 
.cd-testimonials-all.is-visible { 
    visibility: visible;
    opacity: 1; 
    transition: opacity .3s 0s, visibility 0s 0s;
}

Обработка событий

Для создания карусели воспользуемся Flexslider jQuery plugin by Woothemes:

$('.cd-testimonials-wrapper').flexslider({ 
    selector: ".cd-testimonials > li", 
    animation: "slide",
    controlNav: false,
    slideshow: false,
    smoothHeight: true,
    start: function(){
        $('.cd-testimonials').children('li').css({ 'opacity': 1, 'position': 'relative' }); 
    }
    });

Для отображения сетки клиентов воспользуемся библиотекой Masonry:

$('.cd-testimonials-all-wrapper').children('ul').masonry({
    itemSelector: '.cd-testimonials-item'
});

Источник урока: https://codyhouse.co/gem/client-testimonials-carousel/
Перевел: Станислав Протасевич, источник
Демо, исходники

 

Добавить комментарий


Защитный код
Обновить