Back to Shopify Liquid
Shopify Liquid
Facebook Posts
Drop this Shopify Liquid snippet into your theme to add the facebook posts block. Copy the code below, paste it into your theme files, save and you're done.
612 lines · 34.7 KB
Shopify Liquid
1<!DOCTYPE html>2<html lang="en">34<head>5 <meta charset="UTF-8">6 <meta name="viewport" content="width=device-width, initial-scale=1.0">7 <title>Responsive Slider</title>8 <style>9 .user-info {10 display: flex;11 align-items: center;12 gap: 10px;13 }14.description{15font-size: 13px;16}1718 .user-info img {19 width: 40px;20 height: 40px;21 border-radius: 50%;22 object-fit: cover;23 }2425 .user-details {26 display: flex;27 flex-direction: column;28 line-height: 20px;29 }3031 .user-details .name {32 font-weight: bold;33 color: #13152f;34 }3536 .user-details .time {37 font-size: 11px;38 color: #666;39 }4041 .description {42 font-size: 13px;43 color: #333;44 text-align: left;45 line-height: 22px;46 flex-grow: 1;47 }4849 .card-footer {50 margin-top: auto;51 }5253 .stats {54 display: flex;55 justify-content: space-between;56 align-items: center;57 padding-top: 10px;58 font-size: 10px;59 color: #666;60 }6162 .stats .reactions {63 display: flex;64 align-items: center;65 gap: 5px;66 }6768 .actions {69 display: flex;70 justify-content: space-between;71 align-items: center;72 border-top: 1px solid #eaeaea;73 padding-top: 10px;74 font-size: 13px;75 color: #666;76 }7778 .actions div {79 display: flex;80 align-items: center;81 gap: 5px;82 cursor: pointer;83 }8485 .facebook-like {86 width: 15px;87 margin-bottom: 2px;88 }8990 #v3-slider-container {91 overflow: hidden;92 position: relative;93 padding: 20px 5px;94max-width: 1500px;95margin-right: auto;96margin-left: auto;97 }9899 #v3-slider {100 display: flex;101 transition: transform 0.5s ease-in-out;102 }103104 @keyframes upAndDown {105 0%,106 100% {107 transform: translateY(0);108 }109 25% {110 transform: translateY(-4px);111 }112 50% {113 transform: translateY(0px);114 }115 75% {116 transform: translateY(4px);117 }118 }119120 @keyframes downAndUp {121 0%,122 100% {123 transform: translateY(0);124 }125 25% {126 transform: translateY(4px);127 }128 50% {129 transform: translateY(0px);130 }131 75% {132 transform: translateY(-4px);133 }134 }135136 .v3-slider-card:nth-child(odd) {137 animation: upAndDown 4s infinite linear;138 }139140 .v3-slider-card:nth-child(even) {141 animation: downAndUp 4s infinite linear;142 }143144 .v3-slider-card {145 flex: 0 0 80%;146 max-width: 280px;147 height: 280px;148 box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);149 display: flex;150 flex-direction: column;151 background-color: #fff;152 border: 2px solid rgb(239, 239, 243);153 border-radius: 10px;154 padding: 15px;155 box-sizing: border-box;156 gap: 10px;157 position: relative;158 margin-right: 10px;159 }160161 #v3-pagination {162 display: flex;163 justify-content: center;164 margin-top: 10px;165display: none;166 }167168 .v3-pagination-dot {169 width: 10px;170 height: 10px;171 background-color: #ccc;172 border-radius: 50%;173 margin: 0 5px;174 cursor: pointer;175 transition: background-color 0.3s ease;176 }177178 .v3-pagination-dot.active {179 background-color: #333;180 }181 </style>182</head>183184<body>185 <div id="v3-slider-container">186 <div id="v3-slider">187 <div class="v3-slider-card">188 <div class="user-info">189 <img src="https://i.dailymail.co.uk/i/pix/2013/08/29/article-2405475-1B8389EE000005DC-718_634x550.jpg" alt="User">190 <div class="user-details">191 <div class="name">lizaK</div>192 <div class="time">5h ago</div>193 </div>194 </div>195 <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.196 </div>197198 <div class="card-footer">199 <div class="stats">200 <div class="reactions">201 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">202 <span>1.1K</span>203 </div>204 <span>145 comments • 43 shares</span>205 </div>206 <div class="actions">207 <div>208 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">209<g>210 <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>211</g>212</svg> Like213 </div>214 <div>215 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">216 <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>217</svg> Comment218 </div>219 <div>220 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">221 <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>222</svg> Share223 </div>224 </div>225 </div>226 </div>227 <div class="v3-slider-card">228 <div class="user-info">229 <img src="https://plus.unsplash.com/premium_photo-1689530775582-83b8abdb5020?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MXx8cmFuZG9tJTIwcGVyc29ufGVufDB8fDB8fHww" alt="User">230 <div class="user-details">231 <div class="name">Daneil M</div>232 <div class="time">5h ago</div>233 </div>234 </div>235 <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.236 </div>237238 <div class="card-footer">239 <div class="stats">240 <div class="reactions">241 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">242 <span>900</span>243 </div>244 <span>10 comments • 12 shares</span>245 </div>246 <div class="actions">247 <div>248 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">249<g>250 <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>251</g>252</svg> Like253 </div>254 <div>255 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">256 <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>257</svg> Comment258 </div>259 <div>260 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">261 <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>262</svg> Share263 </div>264 </div>265 </div>266 </div>267 <div class="v3-slider-card">268 <div class="user-info">269 <img src="https://plus.unsplash.com/premium_photo-1688891564708-9b2247085923?fm=jpg&q=60&w=3000&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8MTd8fHJhbmRvbSUyMHBlcnNvbnxlbnwwfHwwfHx8MA%3D%3D" alt="User">270 <div class="user-details">271 <div class="name">joel</div>272 <div class="time">5h ago</div>273 </div>274 </div>275 <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.276 </div>277278 <div class="card-footer">279 <div class="stats">280 <div class="reactions">281 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">282 <span>264</span>283 </div>284 <span>6 comments • 14 shares</span>285 </div>286 <div class="actions">287 <div>288 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">289<g>290 <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>291</g>292</svg> Like293 </div>294 <div>295 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">296 <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>297</svg> Comment298 </div>299 <div>300 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">301 <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>302</svg> Share303 </div>304 </div>305 </div>306 </div>307 <div class="v3-slider-card">308 <div class="user-info">309 <img src="https://thumbs.wbm.im/pw/small/6dc1cb1116b972bb2405441d4d590cd2.jpg" alt="User">310 <div class="user-details">311 <div class="name">Mehul g</div>312 <div class="time">5h ago</div>313 </div>314 </div>315 <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.316 </div>317318 <div class="card-footer">319 <div class="stats">320 <div class="reactions">321 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">322 <span>1.8k</span>323 </div>324 <span>8 comments • 18 shares</span>325 </div>326 <div class="actions">327 <div>328 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">329<g>330 <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>331</g>332</svg> Like333 </div>334 <div>335 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">336 <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>337</svg> Comment338 </div>339 <div>340 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">341 <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>342</svg> Share343 </div>344 </div>345 </div>346 </div>347 <div class="v3-slider-card">348 <div class="user-info">349 <img src="https://mir-s3-cdn-cf.behance.net/project_modules/max_1200/35af6a41332353.57a1ce913e889.jpg" alt="User">350 <div class="user-details">351 <div class="name">dustin</div>352 <div class="time">5h ago</div>353 </div>354 </div>355 <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.356 </div>357358 <div class="card-footer">359 <div class="stats">360 <div class="reactions">361 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">362 <span>2K</span>363 </div>364 <span>3 comments • 6 shares</span>365 </div>366 <div class="actions">367 <div>368 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">369<g>370 <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>371</g>372</svg> Like373 </div>374 <div>375 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">376 <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>377</svg> Comment378 </div>379 <div>380 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">381 <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>382</svg> Share383 </div>384 </div>385 </div>386 </div>387 <div class="v3-slider-card">388 <div class="user-info">389 <img src="https://mir-s3-cdn-cf.behance.net/project_modules/1400/570a1745898621.58408191aee7a.jpg" alt="User">390 <div class="user-details">391 <div class="name">jason T</div>392 <div class="time">5h ago</div>393 </div>394 </div>395 <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.396 </div>397398 <div class="card-footer">399 <div class="stats">400 <div class="reactions">401 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">402 <span>124</span>403 </div>404 <span>0 comments • 7 shares</span>405 </div>406 <div class="actions">407 <div>408 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">409<g>410 <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>411</g>412</svg> Like413 </div>414 <div>415 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">416 <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>417</svg> Comment418 </div>419 <div>420 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">421 <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>422</svg> Share423 </div>424 </div>425 </div>426 </div>427 <div class="v3-slider-card">428 <div class="user-info">429 <img src="https://i.pinimg.com/236x/46/c5/29/46c529df39a83ddfddd79ef2928acdc8.jpg" alt="User">430 <div class="user-details">431 <div class="name">Samuel</div>432 <div class="time">5h ago</div>433 </div>434 </div>435 <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.436 </div>437438 <div class="card-footer">439 <div class="stats">440 <div class="reactions">441 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">442 <span>57</span>443 </div>444 <span>2 comments • 2 shares</span>445 </div>446 <div class="actions">447 <div>448 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">449<g>450 <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>451</g>452</svg> Like453 </div>454 <div>455 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">456 <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>457</svg> Comment458 </div>459 <div>460 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">461 <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>462</svg> Share463 </div>464 </div>465 </div>466 </div>467 <div class="v3-slider-card">468 <div class="user-info">469 <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSZ3CKSrBlisr6XIRZEk66RDaBwgP53383vUw&s" alt="User">470 <div class="user-details">471 <div class="name">Liz B</div>472 <div class="time">5h ago</div>473 </div>474 </div>475 <div class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam non urna eu nisi pretium viverra.476 </div>477478 <div class="card-footer">479 <div class="stats">480 <div class="reactions">481 <img src="https://cdn.shopify.com/s/files/1/0798/4267/2987/files/thumbs_up_facebook.jpg?v=1733340667" class="facebook-like">482 <span>13</span>483 </div>484 <span>0 comments • 3 shares</span>485 </div>486 <div class="actions">487 <div>488 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" fill="#666" height="18" width="18" version="1.1" id="Capa_1" viewBox="0 0 471.701 471.701" xml:space="preserve">489<g>490 <path d="M433.601,67.001c-24.7-24.7-57.4-38.2-92.3-38.2s-67.7,13.6-92.4,38.3l-12.9,12.9l-13.1-13.1 c-24.7-24.7-57.6-38.4-92.5-38.4c-34.8,0-67.6,13.6-92.2,38.2c-24.7,24.7-38.3,57.5-38.2,92.4c0,34.9,13.7,67.6,38.4,92.3 l187.8,187.8c2.6,2.6,6.1,4,9.5,4c3.4,0,6.9-1.3,9.5-3.9l188.2-187.5c24.7-24.7,38.3-57.5,38.3-92.4 C471.801,124.501,458.301,91.701,433.601,67.001z M414.401,232.701l-178.7,178l-178.3-178.3c-19.6-19.6-30.4-45.6-30.4-73.3 s10.7-53.7,30.3-73.2c19.5-19.5,45.5-30.3,73.1-30.3c27.7,0,53.8,10.8,73.4,30.4l22.6,22.6c5.3,5.3,13.8,5.3,19.1,0l22.4-22.4 c19.6-19.6,45.7-30.4,73.3-30.4c27.6,0,53.6,10.8,73.2,30.3c19.6,19.6,30.3,45.6,30.3,73.3 C444.801,187.101,434.001,213.101,414.401,232.701z"/>491</g>492</svg> Like493 </div>494 <div>495 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="23" height="23" id="comment">496 <path fill="#666" d="M25.784 21.017A10.992 10.992 0 0 0 27 16c0-6.065-4.935-11-11-11S5 9.935 5 16s4.935 11 11 11c1.742 0 3.468-.419 5.018-1.215l4.74 1.185a.996.996 0 0 0 .949-.263 1 1 0 0 0 .263-.95l-1.186-4.74zm-2.033.11.874 3.498-3.498-.875a1.006 1.006 0 0 0-.731.098A8.99 8.99 0 0 1 16 25c-4.963 0-9-4.038-9-9s4.037-9 9-9 9 4.038 9 9a8.997 8.997 0 0 1-1.151 4.395.995.995 0 0 0-.098.732z"/>497</svg> Comment498 </div>499 <div>500 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="23" height="23" id="share">501 <path fill="#666" d="M6.54 55.08a1.91 1.91 0 0 1-.62-.1 2 2 0 0 1-1.38-2c0-.3 2.06-29.34 31.18-31.62V10.92a2 2 0 0 1 3.43-1.4l19.74 20.16a2 2 0 0 1 0 2.8L39.15 52.64a2 2 0 0 1-3.43-1.4V41c-19.44.74-27.41 13-27.49 13.15a2 2 0 0 1-1.69.93Zm33.18-39.26v7.41a2 2 0 0 1-1.93 2c-18.84.69-25.58 13.24-28 21.31 5-4.32 13.91-9.6 27.81-9.6h.09a2 2 0 0 1 2 2v7.41l15-15.26Z"/>502</svg> Share503 </div>504 </div>505 </div>506 </div>507 </div>508 <div id="v3-pagination"></div>509 </div>510511<script>512 const slider = document.getElementById('v3-slider');513 const pagination = document.getElementById('v3-pagination');514 const cards = Array.from(slider.children);515 const cardWidth = cards[0].offsetWidth + 10; // Includes margin516 const totalWidth = cardWidth * cards.length - 10; // Adjust total width517 const containerWidth = slider.parentElement.offsetWidth;518 let currentIndex = 0;519 let isDragging = false;520 let startX = 0;521 let currentTranslate = 0;522 let prevTranslate = 0;523 let animationID;524525 const updatePagination = () => {526 document.querySelectorAll('.v3-pagination-dot').forEach((dot, index) => {527 dot.classList.toggle('active', index === currentIndex);528 });529 };530531 const goToSlide = (index) => {532 currentIndex = index;533 const maxOffset = Math.max(totalWidth - containerWidth, 0); // Prevent gaps534 const offset = Math.min(currentIndex * cardWidth, maxOffset);535 slider.style.transition = 'transform 0.5s ease';536 slider.style.transform = `translateX(-${offset}px)`;537 currentTranslate = -offset;538 prevTranslate = currentTranslate;539 updatePagination();540 };541542 const createPagination = () => {543 const totalSlides = cards.length;544 pagination.innerHTML = '';545 for (let i = 0; i < totalSlides; i++) {546 const dot = document.createElement('div');547 dot.classList.add('v3-pagination-dot');548 dot.innerHTML = '​'; // Add zero-width space to prevent being treated as empty549 if (i === 0) dot.classList.add('active');550 dot.addEventListener('click', () => goToSlide(i));551 pagination.appendChild(dot);552 }553 };554555 const autoplay = () => {556 currentIndex = (currentIndex + 1) % cards.length;557 goToSlide(currentIndex);558 };559560 // Drag functionality561 slider.addEventListener('mousedown', startDrag);562 slider.addEventListener('touchstart', startDrag);563 slider.addEventListener('mouseup', endDrag);564 slider.addEventListener('touchend', endDrag);565 slider.addEventListener('mousemove', drag);566 slider.addEventListener('touchmove', drag);567568 function startDrag(event) {569 isDragging = true;570 startX = getPositionX(event);571 slider.style.transition = 'none';572 cancelAnimationFrame(animationID);573 }574575 function endDrag() {576 isDragging = false;577 const movedBy = currentTranslate - prevTranslate;578 if (movedBy < -50 && currentIndex < cards.length - 1) {579 currentIndex++;580 }581 if (movedBy > 50 && currentIndex > 0) {582 currentIndex--;583 }584 goToSlide(currentIndex);585 }586587 function drag(event) {588 if (isDragging) {589 const currentPosition = getPositionX(event);590 currentTranslate = prevTranslate + currentPosition - startX;591 slider.style.transform = `translateX(${currentTranslate}px)`;592 }593 }594595 function getPositionX(event) {596 return event.type.includes('mouse') ? event.pageX : event.touches[0].clientX;597 }598599 // Create pagination and resize handling600 createPagination();601 window.addEventListener('resize', () => {602 slider.style.transform = 'translateX(0)';603 currentIndex = 0;604 updatePagination();605 });606607 // Start autoplay608 setInterval(autoplay, 3000);609 </script>610</body>611612</html>
