Michal Kudłacz
asked 10 years ago
  1. <div id=”myCarousel” class=”carousel slide”>
  2. <ol class=”carousel-indicators”>
  3. <li data-target=”#myCarousel” data-slide-to=”0″ class=”active”></li>
  4. <li data-target=”#myCarousel” data-slide-to=”1″></li>
  5. </ol>
  6. <div class=”carousel-inner”>
  7. <div class=”active item”>
  8. <img src=”..” />
  9. <div class=”carousel-caption”>caption 1…</div>
  10. </div>
  11. <div class=”item”>
  12. <img src=”..” />
  13. <div class=”carousel-caption”>caption 2…</div>
  14. </div>
  15. </div>
  16. <a class=”carousel-control left” href=”#myCarousel” data-slide=”prev”><i class=”icon-chevron-left”> </i></a>
  17. <a class=”carousel-control right” href=”#myCarousel” data-slide=”next”><i class=”icon-chevron-right”> </i></a>
  18. </div>
2 Answers
Kido D
answered 10 years ago

Hi Michal,
Here is the code for the slider with 3 images:

 <div class="carousel slide" id="myCarousel">
<ol class="carousel-indicators">
<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
<li data-target="#myCarousel" data-slide-to="1" class=""></li>
<li data-target="#myCarousel" data-slide-to="3" class=""></li>
</ol>
<div class="carousel-inner">
<div class="item active"><img src="http://placehold.it/350x150">
<div class="carousel-caption">
<h4>caption 1...</h4>
<p>desc 1...</p>
</div>
</div>
<div class="item"><img src="http://placehold.it/350x150">
<div class="carousel-caption">
<h4>caption 2...</h4>
<p>desc 2...</p>
</div>
</div>
<div class="item"><img src="http://placehold.it/350x150">
<div class="carousel-caption">
<h4>caption 3...</h4>
<p>desc 3...</p>
</div>
</div>
</div>
<a class="carousel-control left" href="#myCarousel" data-slide="prev"><i class="icon-chevron-left">&nbsp;</i></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right">&nbsp;</i></a>
</div>

You also can use the Add Media button to create a gallery (slider). 
See the screenshot:


 
Hope this helps!

Michal Kudłacz
replied 10 years ago

Thanks for the reply. I can not create a slider with the screenshot. What should I change the html to add more photos?

Kido D
answered 10 years ago

Hi Michal,
As I have answered, you can use the code above to create a slider with 3 images, and you can do the same to create slider with 4 or more images. But the best way to create the slider is using Add Media / Create Gallery in Post/Page editor. I have checked on our demo site, and the slider just works fine.
Please follow the steps below to create a slider:
1) Go to Posts / Add new post
2) Click on Add Media / Create Gallery / Select Files to Upload / Create a new gallery / Insert gallery.
If you still don’t make it work, please send us your site URL and the admin account (via private answer) so we can create a demo post with the slider for you. Regards,  

Powered by DW Question & Answer Pro