Jump to content
Sign in to follow this  
Peter1990

Heed help with my slideshow on my project

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);

}

 

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...