Question

我遇到的问题是，当我点击链接时，例如：

<a class = "btn-slide animation animated-item-3" style = "background-color: deeppink;" href = "../ zeny.php" > Read more! </a>

并始终重定向到同一个链接（ zeder.php ）。我不知道如何处理这个问题。每张幻灯片都应该有你的链接。谢谢。

我的来源：滑块：

<section id="main-slider" class="no-margin">
    <div class="carousel slide">
        <ol class="carousel-indicators">
            <li data-target="#main-slider" data-slide-to="0" class="active"></li>
            <li data-target="#main-slider" data-slide-to="1"></li>
            <li data-target="#main-slider" data-slide-to="2"></li>
            <li data-target="#main-slider" data-slide-to="3"></li>
        </ol>
        <div class="carousel-inner">

            <div class="item active" style="background-image: url(images/slider/bg1.jpg)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-6">
                            <div class="carousel-content">


                            </div>
                        </div>

                        <div class="col-sm-6 hidden-xs animation animated-item-4">
                        </div>

                    </div>
                </div>
            </div><!--/.item-->
            <div class="item" style="background-image: url(images/slider/bg3.png)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h1 style="color: deeppink;" class="animation animated-item-1">Servis pro ženy</h1>
                                <h2 class="animation animated-item-2">Vyslechneme Vás!</h2>
                                <a class="btn-slide animation animated-item-3" style="background-color: deeppink;" href="../zeny.php">Číst více!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.item-->
            <div class="item" style="background-image: url(images/slider/bg2.jpg)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h1 style="color: #00aeef;" class="animation animated-item-1">Nony Autoservis</h1>
                                <h2 class="animation animated-item-2" style="color: #ffffff;">Opravy všeho druhu.</h2>
                                <a class="btn-slide animation animated-item-3" style="background-color: #00aeef;" href="../servis.php">Číst více!</a>
                            </div>
                        </div>

                    </div>
                </div>
            </div><!--/.item-->
            <div class="item" style="background-image: url(images/slider/bg4.jpg)">
                <div class="container">
                    <div class="row slide-margin">
                        <div class="col-sm-6">
                            <div class="carousel-content">
                                <h1 class="animation animated-item-1" style="color: black;">Zederlock</h1>
                                <h2 class="animation animated-item-2" style="color: black;">Zabezpečení Vašeho vozidla.</h2>
                                <a class="btn-slide animation animated-item-3" style="background-color: yellow; color: black;" href="../zeder.php">Číst více!</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div><!--/.item-->
        </div>
    </div>
    <a class="prev hidden-xs" href="#main-slider" data-slide="prev">
        <i class="fa fa-chevron-left"></i>
    </a>
    <a class="next hidden-xs" href="#main-slider" data-slide="next">
        <i class="fa fa-chevron-right"></i>
    </a>
</section><!--/hlavni slider-->

jQuery的：

//#main-slider
    $(function() {
        $('#main-slider').carousel({
            interval: 5000,
            cycle: 'true'
        });
    });

CSS

#main-slider {
  position: relative;
}

.no-margin {
  margin: 0;
  padding: 0;
}

#main-slider .carousel .carousel-content {
  margin-top: 0px;
}

#main-slider .carousel .slide-margin{
  margin-top: 0px;
}

#main-slider .carousel h2 {
  color: #fff;
}

#main-slider .carousel .btn-slide {
  padding: 8px 20px;
  background: #c52d2f;
  color: #fff;
  border-radius: 4px;
  margin-top: 25px;
  display: inline-block;
}

#main-slider .carousel .slider-img{
  text-align: right;
  position: absolute;
}


#main-slider .carousel .item {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: cover;
  left: 0 !important;
  opacity: 0;
  top: 0;
  position: absolute;
  width: 100%;
  display: block !important;
  height: 300px;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
}

#main-slider .carousel .item:first-child {
  top: auto;
  position: relative;
}

#main-slider .carousel .item.active {
  opacity: 1;
  -webkit-transition: opacity ease-in-out 500ms;
  -moz-transition: opacity ease-in-out 500ms;
  -o-transition: opacity ease-in-out 500ms;
  transition: opacity ease-in-out 500ms;
  z-index: 0;
}

#main-slider .prev,
#main-slider .next {
  position: absolute;
  top: 50%;
  background-color: #c52d2f;
  color: #fff;
  display: inline-block;
  margin-top: -25px;
  height: 40px;
  line-height: 40px;
  width: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 4px;
  z-index: 0;
}

#main-slider .prev:hover,
#main-slider .next:hover {
  background-color: #000;
}

#main-slider .prev {
  left: 10px;
}

#main-slider .next {
  right: 10px;
}

#main-slider .carousel-indicators li {
  width: 20px;
  height: 20px;
  background-color: #fff;
  margin: 0 15px 0 0;
  position: relative;
}

#main-slider .carousel-indicators li:after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: rgba(0, 0, 0, 0);
  border: 1px solid #FFF;
  left: -3px;
  top: -3px;
}

#main-slider .carousel-indicators .active{
  width: 20px;
  height: 20px;
  background-color: #c52d2f;
   margin: 0 15px 0 0;
   border: 1px solid #c52d2f;
   position: relative;
}

#main-slider .carousel-indicators .active:after {
  position: absolute;
  content: "";
  width: 24px;
  height: 24px;
  border-radius: 100%;
  background: #c52d2f;
  border: 1px solid #c52d2f;
  left: -3px;
  top: -3px;
}

#main-slider .active .animation.animated-item-1 {
  -webkit-animation: fadeInUp 300ms linear 300ms both;
  -moz-animation: fadeInUp 300ms linear 300ms both;
  -o-animation: fadeInUp 300ms linear 300ms both;
  -ms-animation: fadeInUp 300ms linear 300ms both;
  animation: fadeInUp 300ms linear 300ms both;
}

#main-slider .active .animation.animated-item-2 {
  -webkit-animation: fadeInUp 300ms linear 600ms both;
  -moz-animation: fadeInUp 300ms linear 600ms both;
  -o-animation: fadeInUp 300ms linear 600ms both;
  -ms-animation: fadeInUp 300ms linear 600ms both;
  animation: fadeInUp 300ms linear 600ms both;
}

#main-slider .active .animation.animated-item-3 {
  -webkit-animation: fadeInUp 300ms linear 900ms both;
  -moz-animation: fadeInUp 300ms linear 900ms both;
  -o-animation: fadeInUp 300ms linear 900ms both;
  -ms-animation: fadeInUp 300ms linear 900ms both;
  animation: fadeInUp 300ms linear 900ms both;
}

#main-slider .active .animation.animated-item-4 {
  -webkit-animation: fadeInUp 300ms linear 1200ms both;
  -moz-animation: fadeInUp 300ms linear 1200ms both;
  -o-animation: fadeInUp 300ms linear 1200ms both;
  -ms-animation: fadeInUp 300ms linear 1200ms both;
  animation: fadeInUp 300ms linear 1200ms both;
}
#carousel-slider a i:hover {
  background:#bfbfbf;
  color:#fff;
  border: 1px solid #bfbfbf;
}

#carousel-slider 
.carousel-control {
  width:inherit;
}

#carousel-slider .carousel-control.left i {
  left:-25px
}

#carousel-slider .carousel-control.right i {
  right: -25px;
}

#carousel-slider
.carousel-control.left, 
#carousel-slider
.carousel-control.right {
  background: none;
}

Answer 1

修改

嘿，我刚刚使用了您提供的代码并且工作正常...... 我认为这是一个CSS问题。

请发布你的CSS ...

你可以在这里看到你的html和js：

https://jsfiddle.net/alvarojoao/L4awm569/

//#main-slider $(function() { $('#main-slider').carousel({ interval: 5000, cycle: 'true' }); });

Carousel Slider - Link不适用于其他子页面

1 个答案: