CODEWITHSUNDEEP
javascriptjquerycssslider
kia
kia

Reputation: 1

Create an automatic slider

I created this code for a slider. When I hover the thumbnail image it shows me image, but I need to create an automatic slider. How can i do this? /******************************************************************************************************/ 

.sliderconteainer {
  width: 100%;
  position: relative;
  border: 2px double silver;
  border-radius: 5px;
}

.thmbnail {
  width: 25%;
  height: 100px;
  float: left;
}

.slide {
  width: 100%;
  height: 300px;
  position: absolute;
  float: right;
  left: 0;
  top: 0;
  opacity: 0;
}

.slide img {
  height: 300px;
  width: 100%;
}

.thmbnail img {
  width: 100%;
  height: 95%;
  border: 2px solid #EEEEEE;
  border-radius: 5px;
}

.content-placeholder {
  width: 100%;
  height: 300px;
}

.info {
  background-color: black;
  z-index: 99;
  margin-top: -66px;
  position: absolute;
  width: 100%;
  padding-right: 10px;
  opacity: .75;
  border-radius: 5px;
}

.info p {
  color: #ABB3BD;
  font-family: 'B Mitra';
}

.info h5 {
  font-family: 'B Titr';
  color: #ffffff;
}

.thmbnail:hover .slide {
  opacity: 1;
}
.thmbnail:hover .thmbnail img {
  border: 2px solid #56656E;
}

#main {
  padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main">
  <div class=" sliderconteainer col-md-5 col-sm-5">
    <div class="content-placeholder"></div>
    <div class="thmbnail">
      <div class="slide">
        <img src="~/Image/SiteDesign/profile.jpg" class="img-responsive"/>
        <div class="info">
          <h5>عنوان برای اسلید اول</h5>
          <p>توضیحالت اسلاید دوم</p>
        </div>
      </div>
      <img src="~/Image/SiteDesign/profile.jpg"/>
    </div>
    <div class="thmbnail">
      <div class="slide">
        <img src="~/Image/Slider/8.jpg"/>
        <div class="info">
          <h5>عنوان برای اسلید اول</h5>
          <p>توضیحالت اسلاید دوم</p>
        </div>
      </div>
      <img src="~/Image/Slider/8.jpg"/>
    </div>
    <div class="thmbnail">
      <div class="slide">
        <img src="~/Image/Slider/image-slider-2.jpg"/>
        <div class="info">
          <h5>عنوان برای اسلید اول</h5>
          <p>توضیحالت اسلاید دوم</p>
        </div>
      </div>
      <img src="~/Image/Slider/image-slider-2.jpg"/>
    </div>
    <div class="thmbnail ">
      <div class="slide">
        <img src="~/Image/Slider/Megumi-4565.jpg"/>
        <div class="info">
          <h5>عنوان برای اسلید اول</h5>
          <p>توضیحالت اسلاید دوم</p>
        </div>
      </div>
      <img src="~/Image/Slider/Megumi-4565.jpg"/>
    </div>
  </div>
</div>

Upvotes: 0

Views: 108

Answers (1)

ppasler
ppasler

Reputation: 3719

If you want to change things automatically, you can use the build-in JavaScript function setInterval(xfunction, xInterval), which calls xFunction, every xInterval

setInterval(function() {
  console.log("MOVE IT");
  moveLeft();
}, 1000);

As @dennis-koch mentioned, I would also have a look at plugins you may use for a slider.

Upvotes: 1

Related Questions