CSS - 如何使滑塊外部的滑動條滑塊佔用12列行

我使用的是swiper slider，並且希望在滑塊外部具有導航箭頭。我基本上想要做的就像它在airbnb網站上的樣子一樣，其中帶圖像的滑塊佔據了整個12列的行，但箭頭在它之外。我使用引導嘰嘰喳喳css框架，我已經嘗試過各種東西，但沒有工作，不知道如何實現這一目標？CSS - 如何使滑塊外部的滑動條滑塊佔用12列行

的CSS是這樣的：

.swiper-container { 
    margin-top: 50px; 
    position: relative; 
} 

.arrow-left { 
    position: absolute; 
    top: 50%; 
    left: 0; 
} 

.arrow-right { 
    position: absolute; 
    top: 50%; 
    right: 0; 
}

HTML如下：

 <div class="row swiper-container"> 
      <div class="arrow-left"> 
      <i class="ion-chevron-left"></i> 
      </div> 
      <div class="col-md-12 swiper-wrapper"> 
      @foreach($videos as $video) 
       <div class="swiper-slide video-card"> 
       <header class="card__thumb"> 
        <a href="/player/{{ $player->id }}/video/{{ $video->id }}"><img src="{{ $video->getThumbnail() }}"/></a> 
       </header> 

       <div class="card__body"> 
        <div class="card__category"> 

        </div> 
        <small> 
        {{ $video->created_at->diffForHumans() }} 
        </small> 
        <span class="video-title"> 
        <p> 
         @if($video->title != '') 
         {{ $video->title }} <i class="ion-arrow-right-c"></i> 
         @else 
         Untitled 
         @endif 
        </p> 
        </span> 
       </div> 
       </div> 
      @endforeach 
      </div> 
      <div class="arrow-right"> 
      <i class="ion-chevron-right"></i> 
      </div> 
     </div>

這是腳本：

var carousel = function carousel() { 
    var mySwiper = new Swiper ('.swiper-container', { 
    direction: 'horizontal', 
    nextButton: '.arrow-left', 
    prevButton: '.arrow-right', 
    slidesPerView: 4, 
    simulateTouch: false, 
    spaceBetween: 15, 
    breakpoints: { 
     1181: { 
      slidesPerView: 4 
     }, 
     1180: { 
      slidesPerView: 3 
     }, 
     1020: { 
      slidesPerView: 2 
     }, 
     700: { 
      slidesPerView: 1 
     } 
    } 
    }); 
}; 

$(document).ready(function() { 
    carousel(); 
});

來源

2017-01-25 Leff

很好的JS是打破它爲我的演示，但基本上你想要做的是使用位置：絕對，然後使用正確的:(然而男人y像素你想）和左:(無論你想要多像素） – Keith

是的，我這樣做，但這是行不通的，因爲箭頭沒有定位像他們應該然後 – Leff

沒有swiper滑塊在線文件，我不能複製此 – Keith

這是如何實現基本的例子它。你很近。我稍微修改了代碼，使其在代碼段中可見。

$(document).ready(function() { 
 

 
var carousel = function carousel() { 
 
    var mySwiper = new Swiper ('.swiper-container', { 
 
    direction: 'horizontal', 
 
    nextButton: '.arrow-left', 
 
    prevButton: '.arrow-right', 
 
    slidesPerView: 4, 
 
    simulateTouch: false, 
 
    spaceBetween: 15, 
 
    breakpoints: { 
 
     1181: { 
 
      slidesPerView: 4 
 
     }, 
 
     1180: { 
 
      slidesPerView: 3 
 
     }, 
 
     1020: { 
 
      slidesPerView: 2 
 
     }, 
 
     700: { 
 
      slidesPerView: 1 
 
     } 
 
    } 
 
    }); 
 
}; 
 

 

 
    carousel(); 
 
});

.row.swiper-container { 
 
    margin-top: 50px; 
 
    position: relative; 
 
    width: 70%; 
 
    margin: 0 auto; 
 
} 
 
.arrow-left { 
 
    position: absolute; 
 
    background: gray; 
 
    top: 50%; 
 
    left: -40px; 
 
    width: 20px; 
 
    height: 20px; 
 
    transform: translateY(-50%); 
 
} 
 
.arrow-right { 
 
    position: absolute; 
 
    background: gray; 
 
    top: 50%; 
 
    right: -40px; 
 
    width: 20px; 
 
    height: 20px; 
 
    transform: translateY(-50%); 
 
} 
 

 
.swiper-wrapper { 
 
    margin: 0 auto; 
 
    height: 200px; 
 
    background: #f00; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.x.x/css/swiper.min.css" rel="stylesheet"/> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.1/js/swiper.jquery.min.js"></script> 
 
<div class="row swiper-container"> 
 
    <div class="arrow-left"> 
 
    <i class="ion-chevron-left"></i> 
 
    </div> 
 
    <div class="col-md-12 swiper-wrapper"> 
 
    <div class="swiper-slide video-card"> 
 
     <header class="card__thumb"> 
 
     <a href="/player/{{ $player->id }}/video/{{ $video->id }}"><img src="{{ $video->getThumbnail() }}"/></a> 
 
     </header> 
 

 
     <div class="card__body"> 
 
     <div class="card__category"> 
 

 
     </div> 
 
     <small> 
 
        </small> 
 
     <span class="video-title"> 
 
        <p> 
 

 
        </p> 
 
        </span> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="arrow-right"> 
 
    <i class="ion-chevron-right"></i> 
 
    </div> 
 
</div>

來源

2017-01-25 18:59:50

這是有效的，但我希望容器是12列的100％寬度，以便它與頁面上的其他內容以及容器外部的箭頭對齊。我怎樣才能做到這一點？ – Leff

只需將它設置爲100 –

我不知道爲什麼，但我不能看到箭頭。 – Leff

var swiper = new Swiper('.swiper-container', { 
 
\t \t  nextButton: '.swiper-button-next', 
 
     prevButton: '.swiper-button-prev', 
 
     slidesPerView: 3, 
 
     spaceBetween: 10, 
 
     autoplay: 3500, 
 
     autoplayDisableOnInteraction: false, 
 
\t \t loop: true, 
 
     breakpoints: { 
 
      1024: { 
 
       slidesPerView: 3, 
 
       spaceBetween: 40 
 
      }, 
 
      768: { 
 
       slidesPerView: 3, 
 
       spaceBetween: 30 
 
      }, 
 
      640: { 
 
       slidesPerView: 2, 
 
       spaceBetween: 20 
 
      }, 
 
      320: { 
 
       slidesPerView: 1, 
 
       spaceBetween: 10 
 
      } 
 
     } 
 
    });

.container{max-width: 600px;margin: 0 auto;} 
 
.swiper_wrap{padding:0px 50px;height:100%;width: 100%;position: relative;display: block;text-align: left;} 
 
.swiper-button-next{ 
 
margin-top: 0px; 
 
position: absolute; 
 
top: 50%; 
 
right: -40px; 
 
width: 45px; 
 
height: 45px; 
 
transform: translateY(-50%); 
 
} 
 
.swiper-button-prev{ 
 
    position: absolute; 
 
    top: 50%; 
 
    left: -40px; 
 
    width: 45px; 
 
    height: 45px; 
 
    transform: translateY(-50%); 
 
    margin-top: 0px; 
 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/js/swiper.min.js"></script> 
 
<link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.4.2/css/swiper.min.css" rel="stylesheet"/> 
 
\t \t <div class="container"> 
 

 
<div class="swiper_wrap"> 
 
<div class="slider-wrapper"> 
 
     <div class="swiper-button-prev"></div> 
 
     <div class="swiper-container"> 
 
\t \t \t <div class="swiper-wrapper"> 
 
\t \t \t \t <div class="swiper-slide"> 
 
\t \t \t \t \t <a href="#"> 
 
      <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png"> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
     <div class="swiper-slide"> 
 
\t \t \t \t \t <a href="#"> 
 
      <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png"> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
     <div class="swiper-slide"> 
 
\t \t \t \t \t <a href="#"> 
 
      <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png"> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
     <div class="swiper-slide"> 
 
\t \t \t \t \t <a href="#"> 
 
      <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png"> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div><div class="swiper-slide"> 
 
\t \t \t \t \t <a href="#"> 
 
      <img src="http://redsqdesign.co.uk/wp-content/uploads/2017/02/red-square.png"> 
 
\t \t \t \t \t </a> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
     <!-- Add Pagination --> 
 
     <div class="swiper-pagination"></div> 
 
     </div> 
 
     <div class="swiper-button-next"></div> 
 
</div> 
 
</div> 
 
</div> 
 
<script src="http://www.jakse.si/test/jakse/taxi/js/swiper.min.js"></script>

這個工作對我來說，這就像舊的答案是相同的，但也許它看起來更好:)

來源

2017-09-13 09:14:17 unforgiven

CSS - 如何使滑塊外部的滑動條滑塊佔用12列行

回答

相關問題