This article only applies to the old designer. Not sure which designer you have? Check here.
The Cargo and Parcel themes both make use of the Bootstrap Carousel, which gives you the nice slideshow feature on your homepage. So what if you want to edit it?
First, open up the code editor for the theme you're working with in the Designer tab, and open up the index.html page.
The code for the carousel is found within the <!-- Carousel ... <!-- /.carousel --> block. This is lines 10-94 in Parcel and 8-66 in Cargo.
How do I use a single image rather than a slideshow?
Items in the carousel are built like so:
<div class="item active">
<div data-barley="car-img-1" data-barley-editor="image">
<img class="img-responsive" src="{{ 'images/944x376_slide.svg' | asset_url }}"/>
<div class="img-overlay">
</div>
</div>
<a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
<span class="glyphicon glyphicon-chevron-left" aria-hidden="true">
</span>
<span class="sr-only">
Previous
</span>
</a>
<a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
<span class="glyphicon glyphicon-chevron-right" aria-hidden="true">
</span>
<span class="sr-only">
Next
</span>
</a>
</div>That means, if you want just a single image rather than a slide show you can comment out the extra divs so they do not display, leaving only the "item active" div.
How do I change the speed of the slideshow?
Your carousel div starts with this:
<div id="myCarousel" class="carousel slide" data-ride="carousel">Simply add "data-interval="5000" as an attribute to your Carousel div, replacing 5000 (5000 is 5 seconds, 10000 would be 10 seconds, etc) in the example with how many seconds you want an item displayed before moving on to the next.
<div id="myCarousel" class="carousel slide" data-ride="carousel" data-interval="5000">How do I remove the image overlay?
You may have noticed there's a gray overlay on your images in the Carousel that can cause images to appear darker than they really are. You can remove this by modifying the .img-overlay class in the styles.css file on line 136 in both Parcel and Cargo. Remove the background-color property so it looks like:
.img-overlay{
position: absolute;
opacity: .2;
top:0px;
height: 100%;
width: 100%;
}What else can I do?
For more on how you can customize the carousel, please see the following references: