How to use slick slider jQuery

-

How to use slick slider jquery

A simple way to use slick slider jQuery, This is a 

Fully Responsive & Flexible jQuery slider 

Slick is a fresh new jQuery plugin for creating fully customization, responsive and mobile friendly carousels/sliders that work with any html elements.

How to use slick slider jQuery


 CSS 
<link href="http://kenwheeler.github.io/slick/slick/slick.css" type="text/css" rel="stylesheet"/>

<style type="text/css">
.lazy {
    width: 30%;
    background: wheat;
    height: 400px;
    margin: 0 auto;
    font-size: 50px;
    text-align: center;
}
</style>


More information please visit this url https://www.papawebdesigner.com/
https://www.papawebdesigner.com/



 HTML 

<div class="lazy">
  <div><h3>Test 1</h3></div>
  <div><h3>Test 2</h3></div>
  <div><h3>Test 3</h3></div>
  <div><h3>Test 4</h3></div>
  <div><h3>Test 5</h3></div>
</div>


 JS 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://kenwheeler.github.io/slick/slick/slick.js"></script>

<script type="text/javascript">
$('.lazy').slick({
      lazyLoad: 'ondemand',
      slidesToShow: 1,
      slidesToScroll: 1
    });
</script>


Follow On Social Media -

Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on pinterest    -  https://in.pinterest.com/frontendissue/





Comments

Post a Comment

Popular posts from this blog

Owl carousel center mode with zoom image

-
Image
Owl carousel center mode with zoom image in this slider the code is very simple to use. it is a new creative slide with the use of owl crousal included cursur effective zooimg image active images  HTML  <section class="sec sec-testimonials"> <div class="inner-testimonials"> <div class="owl-carousel custome_slide" id="slide-testimonal">     <div class="test_img">         <div class="main-reviewimage">             <img src="https://images.unsplash.com/photo-1513207565459-d7f36bfa1222?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1535&q=80" class="img-fluid" alt="">         </div>         <div class="testimonial_detail">             <h4>Siana H</h4>             <p>Perfect for what...
Read more

How to owl carousel center mode with zoom image?

-
Image
How to owl carousel center mode with zoom image? <iframe height="500" style="width: 100%;" scrolling="no" title="owl carousel center mode - papawebdesigner" src="//codepen.io/Hitesh123-/embed/jgeXKJ/?height=265&amp;theme-id=0&amp;default-tab=html,result" frameborder="no" allowtransparency="true" allowfullscreen="true">   See the Pen <a href='https://codepen.io/Hitesh123-/pen/jgeXKJ/'>owl carousel center mode - papawebdesigner</a> by Hitesh   (<a href='https://codepen.io/Hitesh123-'>@Hitesh123-</a>) on <a href='https://codepen.io'>CodePen</a>. </iframe> I’d like to do something easy I think with owl-carousel, but unfortunately I can’t do it. I can’t find the parameter to add or I tried playing with owl-carousel classes (owl-item active center). Even with that, I can’t get what I want. Initially all th...
Read more

Hide & show a div using jquery

-
Hide Show Using By Jquery  With jQuery, you can hide and show HTML elements with using hide and show Jquery methods:  HTML  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <button>click button</button>  JS  <script> $(document).ready(function(){   $("#hide").click(function(){     $("p").hide();   }); }); </script> if you want to use Jquery Ui Calendar then go through this link. if you want to use  Flatpickr Calendar  then go through this link . if you want to use  slick slider jQuery  then go through this link . Follow On Social Media - Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344 Follow on instagram   -  https://www.instagram.com/frontendissue/    Follow on Twitter       -  https://twitter.com/IssueEnd Follow on Linkedin  ...
Read more