- <div id=”myCarousel” class=”carousel slide”>
- <ol class=”carousel-indicators”>
- <li data-target=”#myCarousel” data-slide-to=”0″ class=”active”></li>
- <li data-target=”#myCarousel” data-slide-to=”1″></li>
- </ol>
- <div class=”carousel-inner”>
- <div class=”active item”>
- <img src=”..” />
- <div class=”carousel-caption”>caption 1…</div>
- </div>
- <div class=”item”>
- <img src=”..” />
- <div class=”carousel-caption”>caption 2…</div>
- </div>
- </div>
- <a class=”carousel-control left” href=”#myCarousel” data-slide=”prev”><i class=”icon-chevron-left”> </i></a>
- <a class=”carousel-control right” href=”#myCarousel” data-slide=”next”><i class=”icon-chevron-right”> </i></a>
- </div>
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"> </i></a>
<a class="carousel-control right" href="#myCarousel" data-slide="next"><i class="icon-chevron-right"> </i></a>
</div>
You also can use the Add Media button to create a gallery (slider).
See the screenshot:
Hope this helps!
Thanks for the reply. I can not create a slider with the screenshot. What should I change the html to add more photos?
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,
Please login or Register to submit your answer