Home > UI/UX Development > jQuery: Custom responsive slider by using simple jQuery, CSS3 and HTML

jQuery: Custom responsive slider by using simple jQuery, CSS3 and HTML

This post was most recently updated on August 5th, 2024

The slider can use with different templates as a custom slider. As its developed using a simple query, CSS3, HTML5 as well as its support responsiveness up to 320px. Its tested on different and support almost all browsers, mainly Chrome, Mozilafox, Safari, IE, Edge & Opera.

Here is the sample screenshot of the template.

 

JQuery used for this is given below: 

HTML is given below:

<html>
<head>
<link rel=”stylesheet” type=”text/css” href=”style.css” />
<script src=”https://code.jquery.com/jquery-3.3.1.min.js” integrity=”sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=” crossorigin=”anonymous”></script>

</head>
<body class=”ms-body”>
<div class=”ms-container”>
<section class=”ms-slider-wrapper ms-section”>
<h3 class=”ms-slider-title”>Mundrisoft Slider Template</h3> <!– Heading Of slider –>
<div class=”slider-nav”> <!– Nav element of slider clickable component –>
<div class=”items” count=”1″ onClick=”sliderDesktopChange(1)”> <!– data count should be for for both slider-nav and slider-for items –>
<!– Item that has to be duplicated with resect to Slider For Items –>
<div class=”items-img”>
<img class=”hovered” src=”./image/hovered/book9.png” alt=”image” draggable=”false”/>
<img class=”non-hovered” src=”./image/hovered/book8.png” alt=”image” draggable=”false”/>
</div>
<h4 class=””>1 Lorem Ipsum</h4>
<hr class=””>
<p class=””>”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”</p>
<span class=”slider-nav-down-arrow”></span>
</div>
<div class=”items” count=”2″ onClick=”sliderDesktopChange(2)”> <!– data count should be for for both slider-nav and slider-for items –>
<!– Item that has to be duplicated with resect to Slider For Items –>
<div class=”items-img”>
<img class=”hovered” src=”./image/hovered/info-box23.png” alt=”image” draggable=”false”/>
<img class=”non-hovered” src=”./image/hovered/info-box7.png” alt=”image” draggable=”false”/>
</div>
<h4 class=””>2 Lorem Ipsum</h4>
<hr class=””>
<p class=””>”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”</p>
<span class=”slider-nav-down-arrow”></span>
</div>
<div class=”items” count=”3″ onClick=”sliderDesktopChange(3)”> <!– data count should be for for both slider-nav and slider-for items –>
<!– Item that has to be duplicated with resect to Slider For Items –>
<div class=”items-img”>
<img class=”hovered” src=”./image/hovered/pricing2.png” alt=”image” draggable=”false”/>
<img class=”non-hovered” src=”./image/hovered/pricing3.png” alt=”image” draggable=”false”/>
</div>
<h4 class=””>3 Lorem Ipsum</h4>
<hr class=””>
<p class=””>”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”</p>
<span class=”slider-nav-down-arrow”></span>
</div>
<div class=”items” count=”4″ onClick=”sliderDesktopChange(4)”> <!– data count should be for for both slider-nav and slider-for items –>
<!– Item that has to be duplicated with resect to Slider For Items –>
<div class=”items-img”>
<img class=”hovered” src=”./image/hovered/teammember1.png” alt=”image” draggable=”false”/>
<img class=”non-hovered” src=”./image/hovered/teammember2.png” alt=”image” draggable=”false”/>
</div>
<h4 class=””>4 Lorem Ipsum</h4>
<hr class=””>
<p class=””>”Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit…”</p>
<span class=”slider-nav-down-arrow”></span>
</div>
<span class=”desktop-previous” onClick=”desktopPreviousSlider()”></span>
<span class=”desktop-next” onClick=”desktopNextSlider()”></span>
</div>
<div class=”slider-for”> <!– Slider For component to be slide onclick of Slider Nav Item –>
<div class=”items” count=”1″> <!– Item that has to be duplicated with resect to Slider Nav Items –>
<div class=”slider-for-left” count=”1″> <!– Slider left component –>
<div>
<h4>1 Lorem ipsum dolor sit amet</h4>
<p>Aliquam ac augue consectetur, faucibus ex eget, accumsan eros. Aliquam aliquam accumsan nibh, et pretium urna pretium ut.
Ut pharetra mauris non sapien porta accumsan.
Aenean nec diam non nulla vehicula vehicula facilisis venenatis ipsum. Morbi vel urna metus.</p>
</div>
</div>
<div class=”slider-for-right” count=”1″> <!– Slider Right Component –>
<div class=”ms-frame” sliderNo=”1″> <!– Heres come the slider Number; inccremented value –>
<!– <a href=”” target=”_blank”> –>
<img class=”ms-frame-img” src=”./image/membership-benefits.png” alt=””>
<!– </a> –>
</div>
</div>
</div>
<div class=”items” count=”2″> <!– Item that has to be duplicated with resect to Slider Nav Items –>
<div class=”slider-for-left” count=”2″> <!– Slider left component –>
<div>
<h4>2 Lorem ipsum dolor sit amet</h4>
<p>Vivamus tempus dolor felis. Duis scelerisque lobortis sapien, gravida pulvinar neque.
Ut elementum pellentesque libero in pretium.
Fusce maximus nunc eget massa tristique vestibulum. Donec quis malesuada purus.</p>
</div>
</div>
<div class=”slider-for-right” count=”2″> <!– Slider Right Component –>
<div class=”ms-frame” sliderNo=”2″> <!– Heres come the slider Number; inccremented value –>
<!– <a href=”” target=”_blank”> –>
<img class=”ms-frame-img” src=”./image/online.jpg” alt=””>
<!– </a> –>
</div>
</div>
</div>
<div class=”items” count=”3″> <!– Item that has to be duplicated with resect to Slider Nav Items –>
<div class=”slider-for-left” count=”3″> <!– Slider left component –>
<div>
<h4>3 Lorem ipsum dolor sit amet</h4>
<p>Aenean vitae velit a tortor vestibulum blandit et non dui. Nam id elit ac purus finibus porta vel sed turpis.
Etiam scelerisque, ligula vitae finibus sodales,
neque justo ullamcorper est, vel mattis mi nisi id velit.</p>
</div>
</div>
<div class=”slider-for-right” count=”3″> <!– Slider Right Component –>
<div class=”ms-frame” sliderNo=”3″> <!– Heres come the slider Number; inccremented value –>
<!– <a href=”” target=”_blank”> –>
<img class=”ms-frame-img” src=”./image/reputation.jpg” alt=””>
<!– </a> –>
</div>
</div>
</div>
<div class=”items” count=”4″> <!– Item that has to be duplicated with resect to Slider Nav Items –>
<div class=”slider-for-left” count=”4″> <!– Slider left component –>
<div>
<h4>4 Lorem ipsum dolor sit amet</h4>
<p>In ac mollis nisi. Praesent porta pulvinar nunc, nec fringilla sem maximus at.
Nunc suscipit felis at malesuada pellentesque.
Nunc dapibus justo fringilla metus hendrerit, vel finibus ipsum mattis.</p>
</div>
</div>
<div class=”slider-for-right” count=”4″> <!– Slider Right Component –>
<div class=”ms-frame” sliderNo=”4″> <!– Heres come the slider Number; inccremented value –>
<!– <a href=”” target=”_blank”> –>
<img class=”ms-frame-img” src=”./image/website.jpg” alt=””>
<!– </a> –>
</div>
</div>
</div>
<span class=”desktop-previous” onClick=”desktopPreviousSlider()”></span>
<span class=”desktop-next” onClick=”desktopNextSlider()”></span>
</div>
</section>
</div>
</body>
</html>

 

Supporting CSS is given below: 

Download Custom Slider.

This Article is TAGGED in , , . BOOKMARK THE permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">