Reopened Conditioning issue related to carousel bootstrap

[velden]

Je stukje javascript waarbij je items clonet werkt niet zoals je verwacht denk ik.

I think your javascript code, that clones the items, doesn't work as you expect it would.

Code: Select all

$('.carousel .item').each(function(){
  var next = $(this).next();
  if (!next.length) {
    next = $(this).siblings(':first');
  }
  next.children(':first-child').clone().appendTo($(this));
  
  for (var i=0;i<1;i++) {
    next=next.next();
    if (!next.length) {
    	next = $(this).siblings(':first');
  	}
    
    next.children(':first-child').clone().appendTo($(this));
  }
});

Ik begrijp niet helemaal wat je probeert te maken hiermee. Vooral het nut van de for-loop mis ik (volgens mij staat daar gewoon dat ie dat één keer uitvoert, altijd).


I don't understand what exactly you're trying to do with that code. Especially the for-loop isn't clear to me (I think it just doesn't add anything. The loop that is, not the inner code)

In ieder geval, je moet een web inspector gebruiken. Anders kom je hier niet uit. Wat er gebeurt is dat er dit ontstaat:

Anyway, you need to use a web inspecter. Else you won't find out what's happening and how the browser interprets the 'outcome'.

Code: Select all

<div class="item active">
<div class="pure-u-1-3 l-box">
  <a href="http://www.cwmag.ca/news/45/99/Fashion-Trends-Orange-Crush.html" title="Fashion Trends Orange Crush!">
    <img class="pure-img" src="data:image/jpeg;base64,/9j/4AA...A//9k=" alt="Fashion Trends Orange Crush!" height="420" width="420">
    <div class="carousel-caption">
       <p>Fashion</p>
       <h3>Fashion Trends Orange Crush!</h3>
    </div>     
  </a>
</div>
<div class="pure-u-1-3 l-box">
  <a href="http://www.cwmag.ca/news/31/99/The-Small-Business-Trend-in-Vancouver.html" title="The Small Business Trend in Vancouver">
     <img class="pure-img" src="data:image/jpeg;base64,/9j...RRRWBof/9k=" alt="The Small Business Trend in Vancouver" height="420" width="420">
  </a>
</div>
<div class="pure-u-1-3 l-box">
  <a href="http://www.cwmag.ca/news/22/99/Best-Winter-Destination-for-holidays-BRAZIL.html" title="Best Winter Destination for holidays: BRAZIL">
    <img class="pure-img" src="data:image/jpeg;base64,/9j/4A...Hk0UUUzJn//Z" alt="Best Winter Destination for holidays: BRAZIL" height="420" width="420">
    <div class="carousel-caption">
      <p>Travel</p>
      <h3>Best Winter Destination for holidays: BRAZIL</h3>
    </div>     
  </a>
</div>
</div>

Zoals je ziet heb je dan binnen één .item 2 captions.

As you can see above you have more than one (=two) captions within one .item 'container'. That 'source' is the outcome of your javascript tricks.

[luya]

velden,
could you translate the sentence above? Thank you.

[velden]

velden,
could you translate the sentence above? Thank you.

Sorry, was posting to multiple posts and one of them was in Dutch. Obviously not this one. Translated the text.

[luya]

I leaved out the .carousel-caption and create another class for caption. The template is updated to reflect that change