Адаптивный слайдер отзывов
Реализация адаптивной страницы с отзывами клиентов.
Так страница выглядит, если нажать кнопку \»Показать все отзывы\»
И так скрипт выглядит на мобильных разрешениях экрана:
Как реализовать:
1. Разметка html
<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>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus ea, perferendis error repudiandae numquam dolor fuga temporibus. Unde omnis, consequuntur.</p>
<div class="cd-author">
<img src="img/avatar-2.jpg" alt="Author image">
<ul class="cd-author-info">
<li>MyName</li>
<li>Designer, CodyHouse</li>
</ul>
</div>
</li>
<li>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam totam nulla est, illo molestiae maxime officiis, quae ad, ipsum vitae deserunt molestias eius alias.</p>
<div class="cd-author">
<img src="img/avatar-3.jpg" alt="Author image">
<ul class="cd-author-info">
<li>MyName</li>
<li>CEO, CompanyName</li>
</ul>
</div>
</li>
</ul> <!-- cd-testimonials -->
<a href="#0" class="cd-see-all">See all</a>
</div> <!-- cd-testimonials-wrapper -->
<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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Labore nostrum nisi, doloremque error hic nam nemo doloribus porro impedit perferendis. Tempora, distinctio hic suscipit. At ullam eaque atque recusandae modi fugiat voluptatem laborum laboriosam rerum, consequatur reprehenderit omnis, enim pariatur nam, quidem, quas vel reiciendis aspernatur consequuntur. Commodi quasi enim, nisi alias fugit architecto, doloremque, eligendi quam autem exercitationem consectetur.</p>
<div class="cd-author">
<img src="img/avatar-2.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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Exercitationem quibusdam eveniet, molestiae laborum voluptatibus minima hic quasi accusamus ut facere, eius expedita, voluptatem? Repellat incidunt veniam quaerat, qui laboriosam dicta. Quidem ducimus laudantium dolorum enim qui at ipsum, a error.</p>
<div class="cd-author">
<img src="img/avatar-3.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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero voluptates officiis tempore quae officia! Beatae quia deleniti cum corporis eos perferendis libero reiciendis nemo iusto accusamus, debitis tempora voluptas praesentium repudiandae laboriosam excepturi laborum, nisi optio repellat explicabo, incidunt ex numquam. Ullam perferendis officiis harum doloribus quae corrupti minima quia, aliquam nostrum expedita pariatur maxime repellat, voluptas sunt unde, inventore.</p>
<div class="cd-author">
<img src="img/avatar-4.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">
<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-5.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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis quia quas, quis illo adipisci voluptate ex harum iste commodi nulla dolor. Eius ratione quod ab!</p>
<div class="cd-author">
<img src="img/avatar-6.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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur, dignissimos iure rem fugiat consequuntur officiis.</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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At temporibus tempora necessitatibus reiciendis provident deserunt maxime sit id. Dicta aut voluptatibus placeat quibusdam vel, dolore.</p>
<div class="cd-author">
<img src="img/avatar-2.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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis iusto sapiente, excepturi velit, beatae possimus est tenetur cumque fugit tempore dolore fugiat! Recusandae, vel suscipit? Perspiciatis non similique sint suscipit officia illo, accusamus dolorum, voluptate vitae quia ea amet optio magni voluptatem nemo, natus nihil.</p>
<div class="cd-author">
<img src="img/avatar-3.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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor quasi officiis pariatur, fugit minus omnis animi ut assumenda quod commodi, ad a alias maxime unde suscipit magnam, voluptas laboriosam ipsam quibusdam quidem, dolorem deleniti id.</p>
<div class="cd-author">
<img src="img/avatar-4.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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At temporibus tempora necessitatibus reiciendis provident deserunt maxime sit id. Dicta aut voluptatibus placeat quibusdam vel, dolore.</p>
<div class="cd-author">
<img src="img/avatar-5.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">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque tempore ipsam, eos suscipit nostrum molestias reprehenderit, rerum amet cum similique a, ipsum soluta delectus explicabo nihil repellat incidunt! Minima magni possimus mollitia deserunt facere, tempore earum modi, ea ipsa dicta temporibus suscipit quidem ut quibusdam vero voluptatibus nostrum excepturi explicabo nulla harum, molestiae alias. Ab, quidem rem fugit delectus quod.</p>
<div class="cd-author">
<img src="img/avatar-6.jpg" alt="Author image">
<ul class="cd-author-info">
<li>MyName</li>
<li>CEO, CompanyName</li>
</ul>
</div> <!-- cd-author -->
</li>
</ul>
</div> <!-- cd-testimonials-all-wrapper -->
<a href="#0" class="close-btn">Close</a>
</div> <!-- cd-testimonials-all -->2. Добавим стили СSS
.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;
}3. Подключаем библиотеки скриптов:
<script src="js/jquery-2.1.1.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/jquery.flexslider-min.js"></script>
<script src="js/main.js"></script>Готово!
