I am working on implementing a fade in fade out carousel and here is the code that I have:
HTML
<div class="flash-container">
<div class="documentsItem">
<a href="" id="lnkDocuments">
<div class="itemtitle" id="divTitle">Title 1</div>
</a>
</div>
<div class="documentsItem">
<a href="" id="lnkDocuments">
<div class="itemtitle" id="divTitle"> Title 2</div>
</a>
</div>
<div class="documentsItem">
<a href="" id="lnkDocuments">
<div class="itemtitle" id="divTitle"> Title 3</div>
</a>
</div>
</div>
CSS
.flash-container{
float:right;
width:555px;
}
.documentsItem
{
float:right;
width:800px;
}
.documentsItem a{
width:100%;
float:right;
}
.allitemslink{
float:right;
}
.slider-parent-doc{
width:100%;
float:right;
}
.slick-list {
margin-top:25px;
border:solid 1px;
}
.documentsItem a img
{
width:30px;
height:30px;
float:right;
}
.documentsItem a .itemtitle{
float:right;
padding-right:10px;
}
JAVASCRIPT
$('.flash-container').slick({
autoplay: true,
autoplaySpeed: 1000,
fade: true,
infinite: true
});
After running this code, only the Title2 element shows up with the fade in/fade out effect. The other elements are not visible at all. I want to display all the div's like in a carousel. What could be causing this issue? Thank you.