امیررضا غیاثی
3 سال پیش
توسط امیررضا غیاثی
مطرح شد
ساخت اسلاید
سلام چیحوری باید اسلاید رو ایجاد کنیم مثل دیجی کالا هر کاری میکنم نمیشه ممنون میشم راهنمایی کنیم
گزینش سوالات
گفت و گو های مرتبط
دسته بندی سوالات
تگ‌های محبوب
ثبت پرسش جدید
![user-avatar]()
![user-avatar]()
Mohammad
@Mohammad.Naderi85
3 سال پیش
مطرح شد
گزارش تخلف
کپی کردن
0
برای ساخت اسلایدر میتونید از کتابخونه های آ ماده مثل swiperjs استفاده کنید که آموزش استفاده از اون داخل یوتیوب راکت هست
گزارش تخلف
کپی کردن
1
درود...
چارچوب بوت استرپ:
https://getbootstrap.com/docs/5.0/components/carousel/
کتابخانه اسلایدر:
http://responsiveslides.com/
https://wowslider.com/
https://www.jssor.com/
و ...
گزارش تخلف
کپی کردن
0
کد زیر رو فقط کافیه که Copy & Paste کنی . آماده هست :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.0/jquery.min.js" integrity="sha256-xNzN2a4ltkB44Mc/Jz3pT4iU1cmeR0FkXs4pru/JxaQ=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/>
<title>Document</title>
</head>
<body>
<div class="col-md-12 col-lg-1 2col-sm-12 col-xs-12 col-xl-12 swiper" id="mainSlider">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img class="img-fluid" src="https://dkstatics-public.digikala.com/digikala-adservice-banners/3989f40e11255027f681c227ac91bd1f665bab64_1644647482.gif" alt="">
</div>
<div class="swiper-slide">
<img class="img-fluid" src="https://dkstatics-public.digikala.com/digikala-adservice-banners/3f91e80b1abcd7f6a852c262a4e84a37f271c6f3_1644423591.jpg?x-oss-process=image/quality,q_95" alt="">
</div>
</div>
<div class="swiper-button-next"></div>
<div class="swiper-button-prev"></div>
<div class="swiper-pagination"></div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script>
<script>
var swiper = new Swiper("#mainSlider", {
autoplay:true,
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
</script>
</body>
</html>