Слайд-шоу с настраиваемыми ссылками для каждого слайда

Question

Слайд-шоу с настраиваемыми ссылками для каждого слайда

0

Я хочу создать слайд-шоу с настраиваемыми ссылками на каждом слайде. До сих пор я могу использовать jQuery для добавления изображений, которые отображаются в слайд-шоу. Как включить другой текст или кнопки для каждого изображения?

Пример показан на этом веб-сайте: baronfig.com

PS Любые расширения joomla, у которых это тоже было бы хорошо.

user3327639 23 март 2014, в 14:11

Источник

Теги:

jquery

html

joomla

3 ответа

Ещё вопросы

Jobin Jose · Answer 1 · 2014-03-24T01-25-00.000Z

Попробуй это,

Создание красивого слайдера с компонентом баннера Joomla с бесплатным расширением. попробуйте этот модуль слайд-шоу этого баннера.

Отслеживание кликов и хитов.
Отслеживание впечатлений.
Выберите подходящую категорию.
10+ Эффекты слайдов
Случайный режим для всех эффектов.

Надеюсь, что это поможет.

LOTUSMS · Answer 2 · 2014-03-23T11-02-00.000Z

Если вы используете сайт Joomla, просто используйте один из этих слайдеров. У них есть то, что вы ищете

SMART SLIDER
РЕВОЛЮЦИОННЫЙ СЛАЙДЕР

Devima · Answer 3 · 2014-03-23T10-30-00.000Z

Это простой пример идеи.
поскольку вы можете видеть, что изображения находятся в абсолютном положении, над ними находится ссылка.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#container{
    width:500px;
    height:300px;
    position:relative;
    background-color: #09C;
}
.contImages{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
}
.contImages img{
    position: absolute;
    z-index: 1;
}
.contImages a{
    position: absolute;
    z-index: 100;
    display: block;
    left: 0px;
    bottom: 0px;
    background-color: #C63;
    height: 30px;
    width: 100px;
}

</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    $('#next').click(function(){
        $('.contImages:first').appendTo('#container')
        })
});
</script>
</head>
<body>
<div id="container">
      <div class="contImages" style="background-color:red"><a href="#">aaaaa</a><img src="../immagini/foto/ingrandimenti/botti.jpg" width="520" height="300"></div>
      <div class="contImages" style="background-color:green"><a href="#">bbbb</a><img src="../immagini/foto/ingrandimenti/donna.jpg" width="520" height="300"></div>
      <div class="contImages" style="background-color:blue"><a href="#">cccc</a><img src="../immagini/foto/ingrandimenti/donnaaaa.jpg" width="520" height="300"></div>
      <div class="contImages" style="background-color:pink"><a href="#">dddd</a><img src="../immagini/foto/ingrandimenti/faccia.jpg" width="520" height="300"></div>
  </div>
  <input name="" type="button" id="next" value="next">
</body>
</html>