آموزش ویدیویی ساخت اسلایدر با swiperjs
ارسال شده توسط محمد حسین حسینی
1399-12-24
1.55k بازدید
در این ویدیو ساخت اسلایدر با استفاده از کتابخانه swiper را یاد میگیرید.
با استفاده از این کتابخانه تنها با چند خط کد ساده میتوانید اسلایدر دلخواه خود را بسازید که کاملا ریسپانیو هم هست
از این روش میتونید تو سایت وردپرسیتون هم استفاده کنید فقط باید کمی کد نویسی بلد باشید 🙂
برای استفاده از این کتابخانه نیازه که ابتدا آن را در فایل html لود کنید و یا اگه با react یا angular یا هر فریمورک ای استفاده میکنید میتونید با npm اون رو نصب کنید.
برای لود کردن در html:
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
نصب با npm:
npm install swiper
کد نوشته شده در ویدیو:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Swiper demo</title> <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /> <!-- Link Swiper's CSS --> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" /> </head> <body> <!-- Swiper --> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" style="background-image: url('./pic.jpg')"> Slide 1 </div> <div class="swiper-slide"> <a href="https://tatoreh.com">آموزش html</a> </div> <a href="https://tatoreh.com" class="swiper-slide" style="background-image: url('./pic.jpg')" >Slide 3</a > <div class="swiper-slide">Slide 4</div> <div class="swiper-slide">Slide 5</div> <div class="swiper-slide">Slide 6</div> <div class="swiper-slide">Slide 7</div> <div class="swiper-slide">Slide 8</div> <div class="swiper-slide">Slide 9</div> <div class="swiper-slide">Slide 10</div> </div> <!-- Add Arrows --> <div class="swiper-button-next"></div> <div class="swiper-button-prev"></div> <!-- pagination --> <div class="swiper-pagination"></div> </div> <!-- Swiper JS --> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <!-- Initialize Swiper --> <script> var swiper = new Swiper(".swiper-container", { navigation: { nextEl: ".swiper-button-next", prevEl: ".swiper-button-prev", }, pagination: { el: ".swiper-pagination", type: "progressbar", }, loop: true, slidesPerView: 2, spaceBetween: 20, // effect: "cube", autoplay: { delay: 2500, disableOnInteraction: true, }, speed: 600, parallax: true, }) </script> </body> </html> <!-- Demo styles --> <style> html, body { position: relative; height: 100%; } body { background: #eee; font-family: Helvetica Neue, Helvetica, Arial, sans-serif; font-size: 14px; color: #000; margin: 0; padding: 0; } .swiper-container { width: 100%; height: 100%; } .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; background-position: center; background-repeat: no-repeat; background-size: cover; } </style>
نکته: با زدن بر روی دکمه “کد را امتحان کنید” در تب جدیدی در مرورگر ویرایشگر کد به همراه نتیجه آن برای شما به نمایش در میآید که میتوانید با آن نتیجه را به خوبی مشاهده کنید
مطالب زیر را حتما مطالعه کنید
تاتوره و سایت تاتوره را بهتر بشناسید
تاتوره (Datura stramonium L) یا داتوره، یک گیاه علفی یکساله...
CDN یا شبکه توزیع محتوا چیست؟ آیا CDN روی سئو و امنیت سایت اثر دارد؟
CDN چیست؟ CDN چه ارتباطی با سئو و امنیت سایت...
تاثیر سرعت سایت بر سئو SEO – چگونه سرعت سایت را افزایش دهیم؟
تاثیر سرعت سایت بر سئو SEO چیست؟ چرا باید سرعت...
گواهینامه SSL چیست؟ تاثیر SSL بر سئو سایت (بهینه سازی موتورهای جستجو)
گواهینامه SSL چیست؟ تاثیر SSL بر سئو سایت کاربران عزیز...
نحوه انتخاب کلمه کلیدی مناسب – کلمات پر جستجو در گوگل – گوگل ترندز چیست؟
نحوه انتخاب کلمه کلیدی مناسب - کلمات پر جستجو در...
هر آنچه باید از سئو تصاویر بدانیم (آموزش بهینه سازی تصاویر)
سئو تصاویر در این تاتوره تصمیم داریم به سئو تصاویر...
دیدگاهتان را بنویسید
برای نوشتن دیدگاه باید وارد بشوید.