Insert Slider into Home page "Additional content 5.2"

Software Support
1

Hi all, I would like to insert a slideshow on the home page . I read the topics https://pkp.sfu.ca/support/forum/viewtopic.php?t=12655 and tried to insert the html code in the “Adittional content” window. But i’ve some question? the images must be uploaded before with upload button of the “Adittional content” windows?
I try to insert this basic code but the result are that all the image is visible on column.

Cover 21
Cover 22
Cover 23
Cover 24
Previous Next
Where is the error? Thanks in advance
2

The code is this

div id="myCarousel" class="carousel slide" data-ride="carousel"><!-- Indicators --><ol class="carousel-indicators"><li class="active" data-target="#myCarousel" data-slide-to="0"></li><li data-target="#myCarousel" data-slide-to="1"></li><li data-target="#myCarousel" data-slide-to="2"></li><li data-target="#myCarousel" data-slide-to="3"></li></ol><!-- Wrapper for slides --><div class="carousel-inner"><div class="item active"><img src="/ojs/public/site/images/administrator/FAmagazine-21-2012-4001.jpg" alt="Cover 21" /></div><div class="item"><img src="/ojs/public/site/images/administrator/FAmagazine-22-2013-400.jpg" alt="Cover 22" /></div><div class="item"><img src="/ojs/public/site/images/administrator/FAmagazine-23-2013-400.jpg" alt="Cover 23" /></div><div class="item"><img src="/ojs/public/site/images/administrator/FAmagazine-24-2013.jpg" alt="Cover 24" /></div></div><!-- Left and right controls --> <a class="left carousel-control" href="#myCarousel" data-slide="prev"> <span class="sr-only">Previous</span> </a> <a class="right carousel-control" href="#myCarousel" data-slide="next"> <span class="sr-only">Next</span> </a></div>

3

In the code you’ve provided, there is nothing that restricts or changes the display of the images. Do you have a separate Javascript include or CSS file which attaches to the “myCarousel” element? If so, it may not be attaching correctly.

4

They are not able to do so. Are there plugins to use?

5

I’m not aware of an OJS image carousel plugin. Where did you find the sample code you tried?

6

On the W3School website http://www.w3schools.com/bootstrap/bootstrap_carousel.asp

7

To make this work, you’ll need the bootstrap.js and carousel.js includes. See the “Tip” at the top of the bootstap_carousel page, and the core documentation here: http://www.w3schools.com/bootstrap/bootstrap_get_started.asp