Slick Slider

Developer
B.
Size
5,913 Kb
Views
42,483

How do I make an slick slider?

What is a slick slider? How do you make a slick slider? This script and codes were developed by B. on 21 December 2022, Wednesday.

Slick Slider Previews
IQ Test

Slick Slider - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Slick Slider </title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background-color: #f1f1f2;
}
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0;
}
.slick-list:focus { outline: none;
}
.slick-loading .slick-list { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
.slick-list.dragging { cursor: pointer; cursor: hand;
}
.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img { -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; left: 0; top: 0; display: block; zoom: 1;
}
.slick-track:before, .slick-track:after { content: ""; display: table;
}
.slick-track:after { clear: both;
}
.slick-loading .slick-track { visibility: hidden;
}
.slick-slide { float: left; height: 100%; min-height: 1px; display: none;
}
[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;
}
/* Arrows */
.slick-prev,
.slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus { outline: none; background: transparent; color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before { opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before { opacity: 0.5;
}
.slick-prev:before, .slick-next:before { font-family: 'ui-fusion'; font-size: 20px; line-height: 1; color: gold; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-prev { left: -25px;
}
[dir="rtl"] .slick-prev { left: auto; right: -25px;
}
.slick-prev:before { content: "\e603";
}
[dir="rtl"] .slick-prev:before { content: "\e601";
}
.slick-next { right: -25px;
}
[dir="rtl"] .slick-next { left: -25px; right: auto;
}
.slick-next:before { content: "\e601";
}
[dir="rtl"] .slick-next:before { content: "\e603";
}
/* Dots */
.slick-slider { margin-bottom: 30px;
}
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%;
}
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer;
}
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus { outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1;
}
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "."; width: 20px; height: 20px; font-family: 'ui-fusion'; font-size: 0.5em; line-height: 20px; text-align: center; color: white; opacity: 0.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before { color: gold; opacity: 1;
}
.carousel-center { margin: 3em auto; max-width: 64.375em; overflow: hidden; background-color: white; padding-top: 1em;
}
.carousel__title { opacity: 0; text-align: center; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.slick-slide img { border-radius: 100%; margin: 0 auto; opacity: 0.8; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.slick-slide.slick-center img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.slick-slide.slick-center .carousel__title { opacity: 1;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div id="js-carousel-center" class="carousel carousel-center"> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <div class="carousel__item"> <img class="carousel__media" src="http://placehold.it/150x150"/> <p class="carousel__title">title here</p> </div> <button type="button" data-role="none" class="slick-prev">Previous</button> <button type="button" data-role="none" class="slick-next">Next</button>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.3.6/slick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Slick Slider - Script Codes CSS Codes

body { background-color: #f1f1f2;
}
/* Slider */
.slick-slider { position: relative; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -ms-touch-action: pan-y; touch-action: pan-y; -webkit-tap-highlight-color: transparent;
}
.slick-list { position: relative; overflow: hidden; display: block; margin: 0; padding: 0;
}
.slick-list:focus { outline: none;
}
.slick-loading .slick-list { background: #fff slick-image-url("ajax-loader.gif") center center no-repeat;
}
.slick-list.dragging { cursor: pointer; cursor: hand;
}
.slick-slider .slick-list,
.slick-track,
.slick-slide,
.slick-slide img { -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; left: 0; top: 0; display: block; zoom: 1;
}
.slick-track:before, .slick-track:after { content: ""; display: table;
}
.slick-track:after { clear: both;
}
.slick-loading .slick-track { visibility: hidden;
}
.slick-slide { float: left; height: 100%; min-height: 1px; display: none;
}
[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;
}
/* Arrows */
.slick-prev,
.slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0; font-size: 0; cursor: pointer; background: transparent; color: transparent; top: 50%; margin-top: -10px; padding: 0; border: none; outline: none;
}
.slick-prev:hover, .slick-prev:focus,
.slick-next:hover,
.slick-next:focus { outline: none; background: transparent; color: transparent;
}
.slick-prev:hover:before, .slick-prev:focus:before,
.slick-next:hover:before,
.slick-next:focus:before { opacity: 1;
}
.slick-prev.slick-disabled:before,
.slick-next.slick-disabled:before { opacity: 0.5;
}
.slick-prev:before, .slick-next:before { font-family: 'ui-fusion'; font-size: 20px; line-height: 1; color: gold; opacity: 1; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-prev { left: -25px;
}
[dir="rtl"] .slick-prev { left: auto; right: -25px;
}
.slick-prev:before { content: "\e603";
}
[dir="rtl"] .slick-prev:before { content: "\e601";
}
.slick-next { right: -25px;
}
[dir="rtl"] .slick-next { left: -25px; right: auto;
}
.slick-next:before { content: "\e601";
}
[dir="rtl"] .slick-next:before { content: "\e603";
}
/* Dots */
.slick-slider { margin-bottom: 30px;
}
.slick-dots { position: absolute; bottom: -45px; list-style: none; display: block; text-align: center; padding: 0; width: 100%;
}
.slick-dots li { position: relative; display: inline-block; height: 20px; width: 20px; margin: 0 5px; padding: 0; cursor: pointer;
}
.slick-dots li button { border: 0; background: transparent; display: block; height: 20px; width: 20px; outline: none; line-height: 0; font-size: 0; color: transparent; padding: 5px; cursor: pointer;
}
.slick-dots li button:hover, .slick-dots li button:focus { outline: none;
}
.slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1;
}
.slick-dots li button:before { position: absolute; top: 0; left: 0; content: "."; width: 20px; height: 20px; font-family: 'ui-fusion'; font-size: 0.5em; line-height: 20px; text-align: center; color: white; opacity: 0.8; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before { color: gold; opacity: 1;
}
.carousel-center { margin: 3em auto; max-width: 64.375em; overflow: hidden; background-color: white; padding-top: 1em;
}
.carousel__title { opacity: 0; text-align: center; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.slick-slide img { border-radius: 100%; margin: 0 auto; opacity: 0.8; -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); transform: scale(0.8); -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; transition: all 1s ease-in-out;
}
.slick-slide.slick-center img { opacity: 1; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1);
}
.slick-slide.slick-center .carousel__title { opacity: 1;
}

Slick Slider - Script Codes JS Codes

$('#js-carousel-center').slick({ centerMode: true, autoplay: true, arrows: true, slidesToShow: 7, centerPadding: '1%', cssEase:'ease-in-out', responsive: [ { breakpoint: 1000, settings: { centerMode: true, centerPadding: '10%', slidesToShow: 6, } }, { breakpoint: 768, settings: { centerMode: true, centerPadding: '1%', slidesToShow: 3, } }, { breakpoint: 480, settings: { centerMode: true, slidesToShow: 1 } } ]
});
Slick Slider - Script Codes
Slick Slider - Script Codes
Home Page Home
Developer B.
Username wearebold
Uploaded December 21, 2022
Rating 3.5
Size 5,913 Kb
Views 42,483
Do you need developer help for Slick Slider?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

B. (wearebold) Script Codes
Name
Simple Slick Sync Slider
Slide Content Module
Simple Accordion
Polaroid
Simple Preloader
A Pen by B.
Center the Unknow
Plane, Goodbye
Slick Slider with Vimeo API - froogaloop
Particle Earth Map
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!