CMS Development

DMaksimovic
Membre

Showing multiple images in slider

Résolue

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 Votes
1 Solution acceptée
Indra
Solution
Guide | Partenaire solutions Elite
Guide | Partenaire solutions Elite

Showing multiple images in slider

Résolue

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. 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

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

Voir la solution dans l'envoi d'origine

4 Réponses
DMaksimovic
Membre

Showing multiple images in slider

Résolue

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

webdew
Guide | Partenaire solutions Diamond
Guide | Partenaire solutions Diamond

Showing multiple images in slider

Résolue

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 Votes
Indra
Solution
Guide | Partenaire solutions Elite
Guide | Partenaire solutions Elite

Showing multiple images in slider

Résolue

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. 


Vet Digital - The Growth Agency | HubSpot Solutions Partner Agency

Did my post solve your question? Help the community by marking it as a solution
dennisedson
Équipe de développement de HubSpot
Équipe de développement de HubSpot

Showing multiple images in slider

Résolue

@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?

 

0 Votes