Bootstrap, CSS, HTML, Javascript, Latest Post, Technical
0August 16, 2021

jQuery Custom Slider plugin using html and bootstrap

In this post i am show to how to create custom jQuery plugin and also make custom slider plugin. let start ..

Step 1

create index.html page and paste the below code 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
</head>
<body>
    <div class="container" id="box">
        
    </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>



</body>
</html>

in the above code check the div which contain id “box” we will apply our plugin in this div.

Step 2

Create jquery.customslider.js new file paste the below code;
(function ($) {
    $.fn.customsilder = function(option){
        // here we write our code
    }
}(jQuery));

Step 3

add the below code into the customslider js file

what is php

 (function ($) {
    $.fn.customsilder = function(option){
        var setting = $.extend({
            name:"Our  Partners", 
            images:{
                1:"https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg",
                2:"https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg",
                3:"https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg",
                4:"https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg",
                5:"https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg",
            }, 
        },option);
        var slider = '<section class="customer-logos slider">';
        $.each(setting.images, function (i,v ) { 
            slider +='<div class="slide"><img src="'+v+'"></div>';
        });
        slider +='</section>';
        var title = "<h2>"+setting.name+"</h2>"+slider; 
        
        return this.append(title).css({color:setting.color,fontSize:setting.fontSize}) 
    }
}(jQuery));

here we are using slick carousel jquery plugin dependency of our plugin.

How to install laravel 8

Step 4

add CDN link and configuration code for slick carausel.

<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

add this into the index.html page. and extends our code of custome slider.js

(function ($) {
    $.fn.customsilder = function(option){
        var setting = $.extend({
            name:"Our  Partners",
            images:{
                1:"https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg",
                2:"https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg",
                3:"https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg",
                4:"https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg",
                5:"https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg",
            },
            fontsize:'30px'
        },option);
        var slider = '<section class="customer-logos slider">';
        $.each(setting.images, function (i,v ) { 
            slider +='<div class="slide"><img src="'+v+'"></div>';
        });
        slider +='</section>';
        var title = "<h2>"+setting.name+"</h2>"+slider; 
        $(document.bode).ready(function(){
            $('.customer-logos').slick({
                slidesToShow: 6,
                slidesToScroll: 1,
                autoplay: true,
                autoplaySpeed: 1500,
                arrows: false,
                dots: false,
                pauseOnHover: false,
                responsive: [{
                    breakpoint: 768,
                    settings: {
                        slidesToShow: 4
                    }
                }, {
                    breakpoint: 520,
                    settings: {
                        slidesToShow: 3
                    }
                }]
            }); 
        }) 
        return this.append(title).css({color:setting.color,fontSize:setting.fontSize}) 
    }
}(jQuery));

final customslider.js code is above …

now implement our custom plugin in the html page.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<meta name="Description" content="Enter your description here"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css">
<link rel="stylesheet" href="assets/css/style.css">
<title>Title</title>
</head>
<body>
    <div class="container" id="box">
        
    </div>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.1/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.6.0/js/bootstrap.min.js"></script>


<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.6.0/slick.js"></script>

<script src="./welcome.js"></script>
<script>
    jQuery("#box").customsilder({
        images:{
            1:"https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg",
            2:"https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg",
            3:"https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg",
            4:"https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg",
            5:"https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg",
            6:"https://image.freepik.com/free-vector/luxury-letter-e-logo-design_1017-8903.jpg",
            7:"https://image.freepik.com/free-vector/3d-box-logo_1103-876.jpg",
            8:"https://image.freepik.com/free-vector/blue-tech-logo_1103-822.jpg",
            9:"https://image.freepik.com/free-vector/colors-curl-logo-template_23-2147536125.jpg",
            10:"https://image.freepik.com/free-vector/abstract-cross-logo_23-2147536124.jpg",
        }
    });

    
</script>
</body>
</html>

add css into “assets/css/style.css” for formating

h2{
    text-align:center;
    padding: 20px;
  }
  /* Slider */
  
  .slick-slide {
      margin: 0px 20px;
  }
  
  .slick-slide img {
      width: 100%;
  }
  
  .slick-slider
  {
      position: relative;
      display: block;
      box-sizing: border-box;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
              user-select: none;
      -webkit-touch-callout: none;
      -khtml-user-select: none;
      -ms-touch-action: pan-y;
          touch-action: pan-y;
      -webkit-tap-highlight-color: transparent;
  }
  
  .slick-list
  {
      position: relative;
      display: block;
      overflow: hidden;
      margin: 0;
      padding: 0;
  }
  .slick-list:focus
  {
      outline: none;
  }
  .slick-list.dragging
  {
      cursor: pointer;
      cursor: hand;
  }
  
  .slick-slider .slick-track,
  .slick-slider .slick-list
  {
      -webkit-transform: translate3d(0, 0, 0);
         -moz-transform: translate3d(0, 0, 0);
          -ms-transform: translate3d(0, 0, 0);
           -o-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
  }
  
  .slick-track
  {
      position: relative;
      top: 0;
      left: 0;
      display: block;
  }
  .slick-track:before,
  .slick-track:after
  {
      display: table;
      content: '';
  }
  .slick-track:after
  {
      clear: both;
  }
  .slick-loading .slick-track
  {
      visibility: hidden;
  }
  
  .slick-slide
  {
      display: none;
      float: left;
      height: 100%;
      min-height: 1px;
  }
  [dir='rtl'] .slick-slide
  {
      float: right;
  }
  .slick-slide img
  {
      display: block;
  }
  .slick-slide.slick-loading img
  {
      display: none;
  }
  .slick-slide.dragging img
  {
      pointer-events: none;
  }
  .slick-initialized .slick-slide
  {
      display: block;
  }
  .slick-loading .slick-slide
  {
      visibility: hidden;
  }
  .slick-vertical .slick-slide
  {
      display: block;
      height: auto;
      border: 1px solid transparent;
  }
  .slick-arrow.slick-hidden {
      display: none;
  }

now open the in the browser its look like :

If you like the post please share with your friend or colleague and other.

Sam Saifi

My name is Sam saifi. Last five years I am working as a web developer. Now these days I decided to share my knowledge with everyone. I have experience in much trending technology which I want to share with you guys.
Post a Comment