ساخت اسلایدشو ریسپانسیو با jQuery

اسلایدشو تصویر, بهترین راه برای نمایش عکس ها است. در این آموزش jQuery , یک اسلایدشو تصویر که بنابر اسکرین سایزهای مختلف, مقیاس پذیر است.

من از ResponsiveSlides.js برای ساخت اسلایدشو ریسپانسیو استفاده می کنیم. این یک پلاگین jQuery است که کار ما را برای افزودن یک اسلایدر عکس را ساده می کند.

شما می توانید از این اسلایدشو ریسپانسیو (responsive) برای نمایش تصاویر موردعلاقه خود در بنر بلاگ استفاده کنید.

کد HTML لبست تصاویر اسلایدر

کد زیر به شما لیستی از تگ های تصویر HTML داخل المنت container اسلایدر را نشان می دهد. المنت container اسلایدر به عنوان رفرنس برای مقدار دهی اولیه کتابخانه ResponsiveSlides.js و اجرای اسلایدشو برای تصاویر , استفاده می شود.

در این مثال اسلایدشو, یک کپشن برای هریک از اسلایدهای تصویر استفاده کردیم.

<div class="responsive-slider">
    <ul class="rslides" id="slider4">
        <li><img src="images/cream-shake.jpg" alt="">
            <p class="caption">Chocolate Milkshake with Ice Cream</p></li>
        <li><img src="images/sweets-cherries.jpg" alt="">
            <p class="caption">Sweets and Cherries</p></li>
        <li><img src="images/fruity-orange-ice-cream.jpg" alt="">
            <p class="caption">Fruity Orange Ice Cream</p></li>
        <li><img src="images/ice-cream.jpg" alt="">
            <p class="caption">Ice Cream with Fruit Salad</p></li>
        <li><img src="images/sweets.jpg" alt="">
            <p class="caption">Arabian Sweets and Desserts</p></li>
    </ul>
</div>

<p class="caption">Chocolate Milkshake with Ice Cream</p></li>

<p class="caption">Sweets and Cherries</p></li>

<p class="caption">Fruity Orange Ice Cream</p></li>

<p class="caption">Ice Cream with Fruit Salad</p></li>

<p class="caption">Arabian Sweets and Desserts</p></li>

</ul>

</div>

راه اندازی اسلایدشو با ResponsiveSlidesjs

اسکریپت jQuery زیر تابع responsiveSlides() را به همراه آی دی Container اسلایدر فراخوانی می کند. در این مثال, چندین آپشن مثل maxwidth , فعال کردن دکمه های جلو/عقب و سرعت و… ست کردیم.

<script src="jquery-3.2.1.min.js"></script>
<script src="ResponsiveSlides/responsiveslides.min.js"></script>
<script>
	$(function() {
		$("#slider").responsiveSlides({
			auto : false,
			pager : false,
			nav : true,
			speed : 500,
			namespace : "slider-callback",
			maxwidth : "550px"
		});

	});
</script>

$(function() {

$("#slider").responsiveSlides({

auto : false,

pager : false,

nav : true,

speed : 500,

namespace : "slider-callback",

maxwidth : "550px"

});

</script>

خروجی : ساخت اسلایدشو ریسپانسیو با jQuery

اسکرین شات زیر به شما اسلایدشو ریسپانسیو را نشان می دهد. پنجره اسلایدر زیر شامل لینک های ناوبری در سمت راست و چپ اسلایدها است که برای تغییر تصاویر اسلاید استفاده می شود.