Simple Slick Sync Slider
How do I make an simple slick sync slider?
What is a simple slick sync slider? How do you make a simple slick sync slider? This script and codes were developed by B. on 21 December 2022, Wednesday.
Simple Slick Sync Slider Previews
Simple Slick Sync Slider - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Simple Slick Sync Slider</title> <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! */ @charset "UTF-8";
/* Slider */
.slick-slide.slick-current.slick-active img { border: 3px solid red;
}
.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-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; left: 0; top: 0; display: block;
}
.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;
}
/* Slider */
.slick-loading .slick-list { background: #fff url('/images/ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face { font-family: "slick"; src: url('/fonts/slick.eot'); src: url('/fonts/slick.eot?#iefix') format("embedded-opentype"), url('/fonts/slick.woff') format("woff"), url('/fonts/slick.ttf') format("truetype"), url('/fonts/slick.svg#slick') format("svg"); font-weight: normal; font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; 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.25;
}
.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -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: "←";
}
[dir="rtl"] .slick-prev:before { content: "→";
}
.slick-next { right: -25px;
}
[dir="rtl"] .slick-next { left: -25px; right: auto;
}
.slick-next:before { content: "→";
}
[dir="rtl"] .slick-next:before { content: "←";
}
/* 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: 0px; font-size: 0px; 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: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before { color: black; opacity: 0.75;
}
h3 { background: #fff; color: #3498db; font-size: 36px; line-height: 100px; margin: 10px; padding: 2%; position: relative; text-align: center;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="slider slider-nav"> <div><img src="http://placehold.it/200x200"></div> <div><img src="http://placehold.it/200x200"></div> <div><img src="http://placehold.it/200x200"></div> <div><img src="http://placehold.it/200x200"></div>
</div>
<div class="slider slider-for"> <div><h3>1</h3></div> <div><h3>2</h3></div> <div><h3>3</h3></div> <div><h3>4</h3></div>
</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.5.9/slick.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Simple Slick Sync Slider - Script Codes CSS Codes
@charset "UTF-8";
/* Slider */
.slick-slide.slick-current.slick-active img { border: 3px solid red;
}
.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-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; left: 0; top: 0; display: block;
}
.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;
}
/* Slider */
.slick-loading .slick-list { background: #fff url('/images/ajax-loader.gif') center center no-repeat;
}
/* Icons */
@font-face { font-family: "slick"; src: url('/fonts/slick.eot'); src: url('/fonts/slick.eot?#iefix') format("embedded-opentype"), url('/fonts/slick.woff') format("woff"), url('/fonts/slick.ttf') format("truetype"), url('/fonts/slick.svg#slick') format("svg"); font-weight: normal; font-style: normal;
}
/* Arrows */
.slick-prev,
.slick-next { position: absolute; display: block; height: 20px; width: 20px; line-height: 0px; font-size: 0px; 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.25;
}
.slick-prev:before, .slick-next:before { font-family: "slick"; font-size: 20px; line-height: 1; color: white; opacity: 0.75; -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: "←";
}
[dir="rtl"] .slick-prev:before { content: "→";
}
.slick-next { right: -25px;
}
[dir="rtl"] .slick-next { left: -25px; right: auto;
}
.slick-next:before { content: "→";
}
[dir="rtl"] .slick-next:before { content: "←";
}
/* 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: 0px; font-size: 0px; 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: "slick"; font-size: 6px; line-height: 20px; text-align: center; color: black; opacity: 0.25; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before { color: black; opacity: 0.75;
}
h3 { background: #fff; color: #3498db; font-size: 36px; line-height: 100px; margin: 10px; padding: 2%; position: relative; text-align: center;
}
Simple Slick Sync Slider - Script Codes JS Codes
$('.slider-for').slick({ slidesToShow: 1, slidesToScroll: 1, initialSlide: 2, arrows: false, asNavFor: '.slider-nav'
});
$('.slider-nav').slick({ slidesToShow: 4, slidesToScroll: 1, initialSlide: 2, asNavFor: '.slider-for', dots: false, centerMode: false, focusOnSelect: true
});
| Developer | B. |
| Username | wearebold |
| Uploaded | December 21, 2022 |
| Rating | 3 |
| Size | 5,946 Kb |
| Views | 30,360 |
Do you need developer help for Simple Slick Sync 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 | Size |
| Slick Slider | 5,913 Kb |
| Simple CSS3 Button | 2,571 Kb |
| Center the Unknow | 2,434 Kb |
| Snap.svg Mask faces | 3,545 Kb |
| Alerts | 2,726 Kb |
| A Pen by B. | 5,519 Kb |
| Particle Earth Map | 5,106 Kb |
| Slick Slider with Vimeo API - froogaloop | 3,822 Kb |
| Slide Content Module | 6,634 Kb |
| Simple Preloader | 3,265 Kb |
Create amazing blog posts 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!
Similar Scripts & Codes
| Name | Username | Size |
| SVG Playground | Roygwells | 1,834 Kb |
| Responsive Section hover effect to show content | Berdejitendra | 2,540 Kb |
| Weather App | OmranAbazid | 2,596 Kb |
| My Interests | Anshusaxenaarora | 2,015 Kb |
| Spinners using Font Icons | Keyamoon | 3,007 Kb |
| Sinclair Research Computers | MattCowley | 3,068 Kb |
| TweenMax transformOrigin Bubble | Nicolund | 2,209 Kb |
| Flexbox Grid - equal height | DaveOrDead | 2,855 Kb |
| 404 Error Page | WebSonick | 3,203 Kb |
| Scroll to top button | DominicFrancois | 3,743 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!