Showing multiple images in slider

SOLVE
DMaksimovic
Member

Hi guys,

 

I'm trying to make slider with few images, but it only shows me one image, i don't know where the problem is.

 

Here is my code:

HTML:

<div class="slideshow-container">
  <div class="row">
  {% for item in module.field_group %}
    
      <div class="mySlides">
        <img class="demo cursor" src="{{ item.image_field.src }}" alt="{{ item.image_field.alt }}">
      </div>
    
  {% endfor %}
  </div>
 
  <!-- Next and previous buttons -->
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>
</div>

 CSS:

* {
  box-sizing: border-box;
}

/* Add a pointer when hovering over the thumbnail images */
.cursor {
  cursor: pointer;
}

/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}

.row{
  display: flex;
}

.row:after {
  content: "";
  display: table;
  clear: both;
  
}

/* Six columns side by side */
.column {
  float: left;
  width: 16.66%;
    margin-right: 10px;

}

.demo.cursor{
    margin-right: 10px;

}

/* Next & previous buttons */
.prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  margin-top: -22px;
  padding: 16px;
  color: white;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
}

/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}

/* On hover, add a black background color with a little bit see-through */
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.8);
}

JS:

var slideIndex = 1;
  var brojac;
  var niz = [1, 2, 3];
  for(brojac = 0; brojac < 3; brojac++){
    showSlides(slideIndex);
  }
  
// Next/previous controls
function plusSlides(n) {
  for(brojac = 0; brojac < niz.length; brojac++){
    showSlides(slideIndex += n);
  }
}

function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName('mySlides');
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
      slides[i].style.display = "none";
  }
  slides[slideIndex-1].style.display = "block";
}

 

So the idea is to make 5 image slider, where on arrows you would move them.

 

Thanks in advance!

0 Upvotes
1 Accepted solution

Accepted Solutions
Indra
Solution
Top Contributor | Diamond Partner

Hi @dennisedson and @DMaksimovic,

 

I think the problem is that if you add your script to the module.js it (HubSpot) will wrap the function within a function. This will break your code returning an error on the plusSlides function. 

 

You can see the error on the console log clicking on the arrows at this pen.

Also I did see your arrows are going the wrong way, so in the example I changed the -1 and 1 for prev and next.

 

You can do two things:

- Change your code and make sure it will run on a document ready (DOMContentLoaded event)

- Or embed your javascript code into your HTML wrapping it within <script> tags

 

@DMaksimovic you can find enough examples on codepen or the internet if you look for this kind of functionality. 


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

4 Replies 4
dennisedson
Community Manager

@DMaksimovic 

You have a link where this is not working?  I don't see any issues with the code and I tested it as well in this pen.

@Indra , anything leaping out as wrong here?

 

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
Indra
Solution
Top Contributor | Diamond Partner

Hi @dennisedson and @DMaksimovic,

 

I think the problem is that if you add your script to the module.js it (HubSpot) will wrap the function within a function. This will break your code returning an error on the plusSlides function. 

 

You can see the error on the console log clicking on the arrows at this pen.

Also I did see your arrows are going the wrong way, so in the example I changed the -1 and 1 for prev and next.

 

You can do two things:

- Change your code and make sure it will run on a document ready (DOMContentLoaded event)

- Or embed your javascript code into your HTML wrapping it within <script> tags

 

@DMaksimovic you can find enough examples on codepen or the internet if you look for this kind of functionality. 


Bureau Vet

Did my post solve your question? Help the community by marking it as a solution

View solution in original post

webdew
Top Contributor | Diamond Partner

Hi @DMaksimovic ,

webdew_1-1635501550417.png


Follow the screenshot and set value and also set value in slider Script

webdew_2-1635501562903.png

Hope this helps!


If we were able to answer your query, kindly help the community by marking it as a solution.

Thanks and Regards.

0 Upvotes
DMaksimovic
Member

So the problem was in the script so i used different solution, thanks for the quick response!