Simple Click-through Content Slider with jQuery

Simple click-through slider is a multipurpose jQuery content slider that allows you to cycle through a set of DIV elements with smooth CSS3 fade transitions.

content slider codepen, content slider jquery, content slider html css

How to make use of it:

1. Insert a set of slides of content in the slider.

<div class="slider">
  <div class="slide active">
    <h2>Slide One</h2>
    <p>Content One</p>
  <div class="slide">
    <h2>Slide Two</h2>
    <p>Content Two</p>
  <div class="slide">
    <h2>Slide Three</h2>
    <p>Content Three</p>

2. Basic CSS Styles.

.slider {
  position: fixed;
  top: 50%;
  left: 50%;
  width: 700px;
  height: 300px;
  margin-left: -350px;
  margin-top: -150px;
  overflow: hidden;
  border-radius: 7px;
  background-color: black;

.slider .slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  color: white;
  padding: 40px;
  text-align: center;
  font-size: 20px;
  -webkit-transition-duration: 0.5s;
  transition-duration: 0.5s;
  opacity: 0;
  cursor: pointer;

.slider { opacity: 1; }

3. Load the required jQuery JavaScript library into the document.

<script src="//"></script> 

4. JavaScript to enable the content slider.

$(document).ready(function () {
  $('.slider').on('click', function () {
    if ($('.active').next('.slide').length) {
    } else {

simple click-through content slider Plugin/Github

See Demo And Download

Official Website(Lewitje): Click Here

This superior jQuery/javascript plugin is developed by Lewitje. For extra advanced usage, please go to the official website.

Related Posts


Responsive Drag and Drop File Uploader/Download Plugin | 5x5_jq_uploader

5x5_jq_uploader plugin can be used to instantly create a drop file area and file queue with a little bit of preparation. Bootstrap is used for responsive planning…


Stylesheet For Implementing Dark Mode with Bootstrap

Bootstrap Dark Mode provides a style sheet and two texts that allow you to implement Dark Mode on your website. Initially loaded based on user preferences, can…


Multi-purpose Navigation Menu for Javascript Library | jQuery Corenav

coreNavigation is a multipurpose navigation menu for a jquery based javascript library, comes with more style, and is easy to integrate. 11 Default Menu 2 Responsive Navigation…


Simple Multi-Select Dropdown Pure Vanilla Javascript | multiSelect.js

MultiSelect.js is a simple, clean, and progressive JavaScript library designed for easy integration with any type of project or system. The design was heavily influenced by the…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


How To Create A Popup in HTML with CSS

How to create popup in html with css – Popup without JavaScript is an elegant pop-up panel component with an animated scale, written in CSS. Have you…