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.