Carousel Slider with javascript

 Welcome to Designer Blog here i have posted carousel slider with JavaScript

 Step1:

This the output

 BJSlider:





Step2:
BJSlider:
/**************************** SPLASH CONTROL *******************************/
BJSlider = {
    container_id:'splash',
    element_selector:'section',
    nav_id : 'splash_nav',
    active_class: 'active',
    nav_parent_selector: 'container-parent', /*Selector to append the nav div inside. If 'container-parent' value, main containers parent is searched.*/
    start_element: 0,
    max_width_mobiles: 960,
    time_interval: 1000 /*value > 1000*/
};

$(document).ready(function(){
    splash_num = $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).length;
    if(BJSlider.nav_parent_selector === 'container-parent'){
        $("#"+BJSlider.container_id).parent().append("<div id='"+BJSlider.nav_id+"'><ul></ul></div>");
    }else{
        $(BJSlider.nav_parent_selector).append("<div id='"+BJSlider.nav_id+"'><ul></ul></div>");
    }

    for (t = 0; t < splash_num; t++) {
        $("#"+BJSlider.nav_id+" ul").append('<li></li>');
    }
   
    current_splash = BJSlider.start_element;
    $("#"+BJSlider.nav_id+" li").eq(current_splash).addClass(BJSlider.active_class);
    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).show();
   

    splash_interval = setInterval(function () {
        $("#"+BJSlider.container_id+" > "+BJSlider.element_selector+"."+BJSlider.active_class).removeClass(BJSlider.active_class);
        $("#"+BJSlider.nav_id+" li."+BJSlider.active_class).removeClass(BJSlider.active_class);

        if($(window).width() > BJSlider.max_width_mobiles) {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).fadeOut(500);}
        else {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).hide();}

        if (current_splash === splash_num - 1) {current_splash = 0;}
        else {current_splash++;}

        if($(window).width() > BJSlider.max_width_mobiles) {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).fadeIn(1000);}
        else{$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).show();}

        $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).addClass(BJSlider.active_class);
        $("#"+BJSlider.nav_id+" li").eq(current_splash).addClass(BJSlider.active_class);

    }, BJSlider.time_interval);
});

$(document).on('click',"#"+BJSlider.nav_id+" li", function () {
    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector+"."+BJSlider.active_class).fadeOut();
    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector+"."+BJSlider.active_class).removeClass(BJSlider.active_class);

    $("#"+BJSlider.nav_id+" li."+BJSlider.active_class).removeClass(BJSlider.active_class);

    $(this).addClass(BJSlider.active_class);
    splash_interval = window.clearInterval(splash_interval);

    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq($("#"+BJSlider.nav_id+" li").index(this)).fadeIn();
    $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq($("#"+BJSlider.nav_id+" li").index(this)).addClass(BJSlider.active_class);

});

$( "#splash") .mouseenter(function() {
 window.clearInterval(splash_interval);
  })
  .mouseleave(function() {
 splash_interval = setInterval(function () {
        $("#"+BJSlider.container_id+" > "+BJSlider.element_selector+"."+BJSlider.active_class).removeClass(BJSlider.active_class);
        $("#"+BJSlider.nav_id+" li."+BJSlider.active_class).removeClass(BJSlider.active_class);

        if($(window).width() > BJSlider.max_width_mobiles) {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).fadeOut(500);}
        else {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).hide();}

        if (current_splash === splash_num - 1) {current_splash = 0;}
        else {current_splash++;}

        if($(window).width() > BJSlider.max_width_mobiles) {$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).fadeIn(1000);}
        else{$("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).show();}

        $("#"+BJSlider.container_id+" > "+BJSlider.element_selector).eq(current_splash).addClass(BJSlider.active_class);
        $("#"+BJSlider.nav_id+" li").eq(current_splash).addClass(BJSlider.active_class);

    }, BJSlider.time_interval);
  });


Step3:

Style:

#splash {
  position: relative;
  height: 400px;
  overflow: hidden;
}

#splash img {
  position: absolute;
  left: -100%;
  top: -100%;
  right: -100%;
  bottom: -100%;
  margin: auto;
  min-width: 600px;
}

#splash > section {
  display: none;
  height: 400px;
}

#splash div {
  position: relative;
  z-index: 2;
}

#splash_nav {
  width: 100%;
  position: relative;
  float: left;
  text-align: center;
  min-height: 18px;
  margin: 10px 0 0;
}

#splash_nav ul { margin: 0; }

#splash_nav li {
  display: inline-block;
  width: 8px;
  -webkit-transition: none;
  -moz-transition: none;
  -o-transition: none;
  -ms-transition: none;
  transition-duration: none;
  height: 8px;
  border-radius: 4px;
  background-color: #ccc;
  margin: 5px;
  cursor: pointer;
}

#splash_nav li:hover { background-color: #777; }

#splash_nav li.active { background-color: #222; }

Step4:

HTML Code:
<section id="splash">
  <section> <img id="img1" src="https://unsplash.it/2000/1330?image=632" alt="Example 1" />
    <div>
      <h1>Image Caption 1</h1>
      <h2>More Description.</h2>
    </div>
  </section>
  <section> <img id="img2" src="https://unsplash.it/2000/1330?image=628" alt="Example 2" />
    <div>
      <h1>Image Caption 2</h1>
      <h2>More Description.</h2>
    </div>
  </section>
  <section> <img id="img3" src="https://unsplash.it/2000/1330?image=634" alt="Example 3" />
    <div>
      <h1>Image Caption 3</h1>
      <h2>More Description.</h2>
    </div>
  </section>
</section>







Step5:

Enjoy Folks







Sources

http://www.jqueryscript.net/slider/Basic-Full-width-Image-Slider-Plugin-with-jQuery.html