Back to Shopify Liquid
Shopify Liquid
Review Sliders v1
Drop this Shopify Liquid snippet into your theme to add the review sliders v1 block. Copy the code below, paste it into your theme files, save and you're done.
272 lines · 10.0 KB
Shopify Liquid
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Card Slider with Swiper</title>7 <!-- Swiper CSS -->8 <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css">9 <style>1011 #card-container {12 width: 100%;13 margin: 0 auto;14 overflow: hidden;15 position: relative;1617 }18 .swiper-wrapper {19 min-width: 100%; /* Set a minimum width to prevent excessive compression */20 box-sizing: content-box; /* Ensure the width includes padding and border, but not margin */21}2223 .swiper-container {24 width: calc(100% - 20px);25 position: relative;26 margin: 0 auto;27padding: 10px 0px;28 }2930@keyframes upAndDown {31 0%, 100% {32 transform: translateY(0); /* Original position */33 }34 25% {35 transform: translateY(-4px);36 }37 50% {38 transform: translateY(0px);39 }40 75% {41 transform: translateY(4px);42 }43}4445@keyframes downAndUp {46 0%, 100% {47 transform: translateY(0); /* Original position */48 }49 25% {50 transform: translateY(4px);51 }52 50% {53 transform: translateY(0px);54 }55 75% {56 transform: translateY(-4px);57 }58}5960.swiper-slide:nth-child(odd) {61 animation: upAndDown 4s infinite linear;62}6364.swiper-slide:nth-child(even) {65 animation: downAndUp 4s infinite linear;66}676869.swiper-slide {70 max-width: 280px;71 height: 230px;72 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);73 display: flex;74 flex-direction: column;75 align-items: center;76 background-color: #fff;77 border: 2px solid rgb(239, 239, 243);78 border-radius: 5px;79 padding: 11px;80 box-sizing: border-box;81 justify-content: space-between;82 gap: 15px;83}84858687 .rating {88 font-size: 32px;89 color: #f7d131;90 margin-top: 10px;91line-height: 20px;92 }9394 .description {95 font-size: 14px;96 color: #333;97 text-align: center;98 justify-content: space-between;99 line-height: 22px;100 }101.name{102 display: flex;103 align-items: center;104 gap: 5px;105}106107108109 .swiper-button-prev, .swiper-button-next {110 color: white;111 font-size: 15px!important;112 background-color: #333;113 width: 30px;114 height: 30px;115 border-radius: 50%;116 margin: 0 10px;117 top: 42%!important;118 }119120 @media (max-width: 767px) {121 .swiper-button-prev, .swiper-button-next {122 display: none;123 }124 }125126 .swiper-pagination {127 position: relative;128 top: auto;129 left: auto;130 right: auto;131 margin-top: 30px;132 display: flex;133 justify-content: center;134 align-items: center;135 }136137 .swiper-pagination-bullet {138 width: 0.5rem;139 height: 0.5rem;140 background-color: #0d437d;141 margin: 0 5px;142 border-radius: 2px;143 cursor: pointer;144 }145146 .swiper-pagination-bullet-active {147 width: 1.5rem;148 background-color: #0d437d;149 border-radius: 4px;150 }151 .swiper-button-next:after,.swiper-button-prev:after {152 font-family: swiper-icons;153 font-size: 15px;154 text-transform: none!important;155 letter-spacing: 0;156 font-variant: initial;157 line-height: 1158}159160 </style>161162163164165166167<div class="container">168 <div id="card-container">169 <div class="swiper-container">170 <div class="swiper-wrapper">171 <div class="swiper-slide">172 <div class="rating">★★★★★</div>173 <div class="description">"I much prefer them over liquid detergent because they are easy to store, clean to use and I love that you can rip the sheets if you want to change the amount you are using."</div>174 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Davina K</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 12px; color: #13152f;" >Verified</font></div>175 </div>176 <div class="swiper-slide">177 <div class="rating">★★★★★</div>178 <div class="description">"I'm impressed so far with the cleaning power, as well as the convenience. Of course limited packaging waste is a big win, too!"</div>179 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Aliza</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>180 </div>181 <div class="swiper-slide">182 <div class="rating">★★★★★</div>183 <div class="description">Very simple detergent, does the job just as good, small pacakging, great product"</div>184 <div class = "name""> <font style = "color: #13152f!important; font-weight: bold;">Jayna H</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>185 </div>186<div class="swiper-slide">187 <div class="rating">188 <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #DDDDDD;">★</span>189 </div>190 <div class="description" style = "margin-top:10px">191 "Yes very happy with the product. I bought it to use when travelling in our caravan. Light and convenient. Tested it on clothes at home and seems to work very well."192 </div>193 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Ally</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>194</div>195196 <div class="swiper-slide">197 <div class="rating">★★★★★</div>198 <div class="description">"199 i used to get rashes before using these sheets, well not anymore, thank you so much!200 "</div>201 <div class = "name" > <font style = "color: #13152f!important; font-weight: bold;">Mehul G</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>202 </div>203 <div class="swiper-slide">204 <div class="rating">★★★★★</div>205 <div class="description">"206 Easy to order, easy to use and great washing results !207 "</div>208 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Noah D</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>209 </div>210<div class="swiper-slide">211 <div class="rating">212 <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="background-image: linear-gradient(to right, #f7d131 50%, #dddddd 50%);213 -webkit-background-clip: text !important;214 -moz-background-clip: text !important;215 -webkit-text-fill-color: transparent !important;">★</span>216 </div>217 <div class="description">It has completely stopped my skin irritation, i never knew how harmful my liquid detergent was</div>218 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Ada T</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>219</div>220221<div class="swiper-slide">222 <div class="rating">223 <span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #f7d131;">★</span><span style="color: #DDDDDD;">★</span>224 </div>225 <div class="description">My shelves are now free for my other cleaning supplies, one neat tidy cupboard for all my supplies thanks to your compact detergent</div>226 <div class = "name"> <font style = "color: #13152f!important; font-weight: bold;">Martha</font> <img src="https://cdn3.emoji.gg/emojis/9796-verified.png" width="20px" height="20px" alt="Verified"> <font style = "font-size: 13px; color: #13152f;" >Verified</font></div>227</div>228 </div>229 <!-- Add Navigation Arrows -->230 <div class="swiper-button-prev"></div>231 <div class="swiper-button-next"></div>232 <!-- Add Pagination -->233 <div class="swiper-pagination"></div>234 </div>235 </div>236</div>237238239 <!-- Swiper JS -->240 <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>241 <script>242 document.addEventListener("DOMContentLoaded", function () {243 var swiper = new Swiper('.swiper-container', {244 slidesPerView: 'auto',245 spaceBetween: 10,246 navigation: {247 nextEl: '.swiper-button-next',248 prevEl: '.swiper-button-prev',249 },250 pagination: {251 el: '.swiper-pagination',252 clickable: true,253 },254 autoplay: {255 delay: 10000, // Autoplay every 10 seconds256 disableOnInteraction: false, // Allow manual navigation without stopping autoplay257 },258 breakpoints: {259 1024: {260 slidesPerView: 3,261 },262 1300: {263 slidesPerView: 4,264 },265 },266 });267 });268 </script>269270271</body>272</html>
