Адаптивный слайдер отзывов
Реализация адаптивной страницы с отзывами клиентов.
Так страница выглядит, если нажать кнопку \»Показать все отзывы\»
И так скрипт выглядит на мобильных разрешениях экрана:
Как реализовать:
1. Разметка html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 |
<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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 |
.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. Подключаем библиотеки скриптов:
|
1 2 3 4 |
<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> |
Готово!
