Manual 3-slide slideshow layout
If you wish to create a manual slideshow layout that will look as follows, follow the steps indicated.
Create a Raw HTML, and copy and paste the following HTML code:
<div class="carousel-wrapper">
<span id="item-1"></span>
<span id="item-2"></span>
<span id="item-3"></span>
<div class="carousel-item item-1">
<a class="arrow arrow-prev" href="#item-3"></a>
<a class="arrow arrow-next" href="#item-2"></a>
</div>
<div class="carousel-item item-2">
<a class="arrow arrow-prev" href="#item-1"></a>
<a class="arrow arrow-next" href="#item-3"></a>
</div>
<div class="carousel-item item-3">
<a class="arrow arrow-prev" href="#item-2"></a>
<a class="arrow arrow-next" href="#item-1"></a>
</div>
</div>
<style type="text/css">
.carousel-wrapper{
height:400px;
position:relative;
width:auto;
margin:0 auto;
}
.carousel-item{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
padding:25px 50px;
opacity:0;
transition: all 0.5s ease-in-out;
}
.arrow{
position:absolute;
top:0;
display:block;
width:50px;
height:100%;
background: url("http://dancort.es/assets/img/css-carousel/carousel-arrow-dark.png") 50% 50% /
20px no-repeat;
}
.arrow-prev{
left:0;
}
.arrow-next{
right:0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.light{
color:white;
}
@media (max-width: 480px) {
.arrow, .light .arrow {
background-size: 10px;
background-position: 10px 50%;
}
}
}
/*Select every element*/
[id^="item"] {
display: none;
}
.item-1 {
z-index: 2;
opacity: 1;
background:url('/static/chiot1.jpg');
background-size:cover;
}
.item-2{
background:url('/static/chiot2.jpg');
background-size:cover;
}
.item-3{
background:url('/static/chiot3.jpg');
background-size:cover;
}
*:target ~ .item-1 {
opacity: 0;
}
#item-1:target ~ .item-1 {
opacity: 1;
}
#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
}
</style>Manual 4-slide slideshow layout
If you wish to create a four slides carousel: create a Raw HTML, copy and paste the following HTML code:
<div class="carousel-wrapper">
<span id="item-1"></span>
<span id="item-2"></span>
<span id="item-3"></span>
<span id="item-4"></span>
<div class="carousel-item item-1">
<a class="arrow arrow-prev" href="#item-4"></a>
<a class="arrow arrow-next" href="#item-2"></a>
</div>
<div class="carousel-item item-2">
<a class="arrow arrow-prev" href="#item-1"></a>
<a class="arrow arrow-next" href="#item-3"></a>
</div>
<div class="carousel-item item-3">
<a class="arrow arrow-prev" href="#item-2"></a>
<a class="arrow arrow-next" href="#item-4"></a>
</div>
<div class="carousel-item item-4">
<a class="arrow arrow-prev" href="#item-3"></a>
<a class="arrow arrow-next" href="#item-1"></a>
</div>
</div>
<style type="text/css">
.carousel-wrapper{
height:400px;
position:relative;
width:auto;
margin:0 auto;
}
.carousel-item{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
padding:25px 50px;
opacity:0;
transition: all 0.5s ease-in-out;
}
.arrow{
position:absolute;
top:0;
display:block;
width:50px;
height:100%;
background: url("http://dancort.es/assets/img/css-carousel/carousel-arrow-dark.png") 50% 50% /
20px no-repeat;
}
.arrow-prev{
left:0;
}
.arrow-next{
right:0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.light{
color:white;
}
@media (max-width: 480px) {
.arrow, .light .arrow {
background-size: 10px;
background-position: 10px 50%;
}
}
}
/*Select every element*/
[id^="item"] {
display: none;
}
.item-1 {
z-index: 2;
opacity: 1;
background:url('/static/chiot1.jpg');
background-size:cover;
}
.item-2{
background:url('/static/chiot2.jpg');
background-size:cover;
}
.item-3{
background:url('/static/chiot3.jpg');
background-size:cover;
}
.item-4{
background:url('/static/chaton3.jpg');
background-size:cover;
}
*:target ~ .item-1 {
opacity: 0;
}
#item-1:target ~ .item-1 {
opacity: 1;
}
#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
#item-3:target ~ .item-3, #item-4:target ~ .item-4 {
z-index: 3;
opacity: 1;
}
#item-4:target ~ .item-4, #item-5:target ~ .item-5 {
z-index: 3;
opacity: 1;
}
}
</style>Manual 6-slide slideshow layout
If you wish to create a six slides carousel: create a Raw HTML, copy and paste the following HTML code:
<div class="carousel-wrapper">
<span id="item-1"></span>
<span id="item-2"></span>
<span id="item-3"></span>
<span id="item-4"></span>
<span id="item-5"></span>
<span id="item-6"></span>
<div class="carousel-item item-1">
<a class="arrow arrow-prev" href="#item-6"></a>
<a class="arrow arrow-next" href="#item-2"></a>
</div>
<div class="carousel-item item-2">
<a class="arrow arrow-prev" href="#item-1"></a>
<a class="arrow arrow-next" href="#item-3"></a>
</div>
<div class="carousel-item item-3">
<a class="arrow arrow-prev" href="#item-2"></a>
<a class="arrow arrow-next" href="#item-4"></a>
</div>
<div class="carousel-item item-4">
<a class="arrow arrow-prev" href="#item-3"></a>
<a class="arrow arrow-next" href="#item-5"></a>
</div>
<div class="carousel-item item-5">
<a class="arrow arrow-prev" href="#item-5"></a>
<a class="arrow arrow-next" href="#item-6"></a>
</div>
<div class="carousel-item item-6">
<a class="arrow arrow-prev" href="#item-5"></a>
<a class="arrow arrow-next" href="#item-1"></a>
</div>
</div>
<style type="text/css">
.carousel-wrapper{
height:400px;
position:relative;
width:auto;
margin:0 auto;
}
.carousel-item{
position:absolute;
top:0;
bottom:0;
left:0;
right:0;
padding:25px 50px;
opacity:0;
transition: all 0.5s ease-in-out;
}
.arrow{
position:absolute;
top:0;
display:block;
width:50px;
height:100%;
background: url("http://dancort.es/assets/img/css-carousel/carousel-arrow-dark.png") 50% 50% /
20px no-repeat;
}
.arrow-prev{
left:0;
}
.arrow-next{
right:0;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.light{
color:white;
}
@media (max-width: 480px) {
.arrow, .light .arrow {
background-size: 10px;
background-position: 10px 50%;
}
}
}
/*Select every element*/
[id^="item"] {
display: none;
}
.item-1 {
z-index: 2;
opacity: 1;
background:url('/static/chiot1.jpg');
background-size:cover;
}
.item-2{
background:url('/static/chiot2.jpg');
background-size:cover;
}
.item-3{
background:url('/static/chiot3.jpg');
background-size:cover;
}
.item-4{
background:url('/static/chaton3.jpg');
background-size:cover;
}
.item-5{
background:url('/static/chaton2.jpg');
background-size:cover;
}
.item-6{
background:url('/static/chaton4.jpg');
background-size:cover;
}
*:target ~ .item-1 {
opacity: 0;
}
#item-1:target ~ .item-1 {
opacity: 1;
}
#item-2:target ~ .item-2, #item-3:target ~ .item-3 {
z-index: 3;
opacity: 1;
}
#item-3:target ~ .item-3, #item-4:target ~ .item-4 {
z-index: 3;
opacity: 1;
}
#item-4:target ~ .item-4, #item-5:target ~ .item-5 {
z-index: 3;
opacity: 1;
}
#item-5:target ~ .item-5, #item-6:target ~ .item-6 {
z-index: 3;
opacity: 1;
}
}
</style>