There is a background image slider:

HTML markup:

<ul class="body_slides"> <li></li> <li></li> <li></li> </ul>

CSS styles:

 .body_slides { list-style:none; margin:0; padding:0; z-index:-2; background:#000;} .body_slides, .body_slides:after{ position: fixed; width:100%; height:100%; top:0px; left:0px;} .body_slides:after { content: ''; background: transparent url(images/pattern.png) repeat top left;} .body_slides li{ width:100%; height:100%; position:absolute; top:0; left:0; background-size:cover; background-repeat:none; opacity:0; -webkit-animation: anim_slides 18s linear infinite 0s; -moz-animation: anim_slides 18s linear infinite 0s; -o-animation: anim_slides 18s linear infinite 0s; -ms-animation: anim_slides 18s linear infinite 0s; animation: anim_slides 18s linear infinite 0s; } .body_slides li:nth-child(1){ background-image: url(images/1.jpg) } .body_slides li:nth-child(2){ -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s; background-image: url(images/2.jpg) } .body_slides li:nth-child(3){ -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; background-image: url(images/3.jpg) } @-webkit-keyframes anim_slides { 0% {opacity:0;} 6% {opacity:1;} 24% {opacity:1;} 30% {opacity:0;} 100% {opacity:0;} } @-moz-keyframes anim_slides { 0% {opacity:0;} 6% {opacity:1;} 24% {opacity:1;} 30% {opacity:0;} 100% {opacity:0;} }

How to make each of the backgrounds clickable and each with its own link? Thank.

  • Markup can change? - Maks Devda

3 answers 3

 <ul class="body_slides" onClick='location.href=link'> <li></li> <li></li> <li></li> </ul>

    If you can change the HTML markup,

     <style> .body_slides a { display: block; } </style> <li><a href=''></a></li>

      If you can change the markup, which would be more correct - paste the link into each li, specifying the address in the href. For reference throughout the area:

       .body_slides li a{ display: block; width: 100%; height: 100%; float: left; }

      If you can't, I think you'll have to write something like a handler on js. For example, getting the slide number and, based on this in switch, redirect to the desired link.