Jump to content

Heed help with my slideshow on my project


Peter1990
 Share

Recommended Posts

Hello,

I am pretty new in JavaScript. These days I am implementing slideshow on my project. But I am facing with two  problems:

Problem number 1: I would like my slideshow to have two options :

- option number 1: arrays with user can slide images manually

option number 2 I want images to slide automatically for (lets say) 5 seconds.

My problem is that I can`t implement these two options to run together. On w3schools.com they are codes for option number 1 and option number 2 but are separately, and I can`t implement to run together. Is there any way there options to run together?

 

Problem number 2: It will be much better for my project if I can implement some cool slides when my images slides. For now, they are sliding normal from right to left, but as I can see, they are options for images to slides on very cool way. Here there are some cool slides: https://amazingslider.com/examples/

 

My code is here:

CSS:

 

.slideshow-container {

  positionrelative;

  max-width1200px;

  box-sizingborder-box;

  marginauto;

}

 

.number {

  positionabsolute;

  colorwhite;

  margin15px;

  font-size18px;

}

 

.text {

  color#f2f2f2;

  font-size15px;

  padding8px 12px;

  positionabsolute;

  bottom8px;

  width100%;

  text-aligncenter;

}

 

.prev {

  positionabsolute;

  top50%;

  colorwhite;

  font-size35px;

  left0;

  padding-left15px;

  padding-right15px;

  background-colorblack;

}

 

.next {

  positionabsolute;

  top50%;

  colorwhite;

  font-size35px;

  right0;

  padding-left15px;

  padding-right15px;

  box-sizingborder-box;

  background-colorblack;

}

 

.prev:hover,

.next:hover {

  background-colorgray;

  cursorpointer;

}

 

.dot {

  width15px;

  height15px;

  background-colorlightgray;

  border-radius50%;

  margin5px;

  displayinline-block;

  cursorpointer;

}

 

.active {

  background-color#717171;

}

.container {

  positionrelative;

  width50%;

}

 

.image {

  displayblock;

  width100%;

  heightauto;

}

 

.overlay {

  positionabsolute;

  bottom0;

  left0;

  right0;

  background-colortransparent;

  overflowhidden;

  width100%;

  height10%;

  transition0.5s ease;

}

 

.container:hover .overlay {

  height100%;

}

 

.text-overlay {

  color#333;

  font-size20px;

  positionabsolute;

  top50%;

  left50%;

  -webkit-transformtranslate(-50%-50%);

  -ms-transformtranslate(-50%-50%);

  transformtranslate(-50%-50%);

  text-aligncenter;

}

 

.images-overlay {

  displayflex;

  margin-left15%;

  margin-right15%;

}

 

Javascript

var slideIndex = 1

showSlides(slideIndex);

 

function plusSlides(n) {

 

  showSlides((slideIndex += n));

}

 

function currentSlide(n) {

 

  showSlides((slideIndex = n));

}

 

function showSlides(n) {

  var i;

  var slides = document.getElementsByClassName("mySlides");

  var dots = document.getElementsByClassName("dot");

  if (n > slides.length) {

    slideIndex = 1;

  }

  if (n < 1) {

    slideIndex = slides.length;

  }

  for (i = 0i < slides.lengthi++) {

    slides[i].style.display = "none";

  }

  for (i = 0i < dots.lengthi++) {

    dots[i].className = dots[i].className.replace(" active""");

  }

  slides[slideIndex - 1].style.display = "block";

  dots[slideIndex - 1].className += " active";

  setInterval(showSlides1000);

}

 

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...