javascript - ResponsiveSlides.js 无法正确显示导航栏

Question

我正在使用 wordpress，但我在这里问这个是因为这是 jquery/css 的问题。我正在使用 responsiveSlides.js 制作一个非常简单的幻灯片，但是如果你在这里看一下 gallery link ，它似乎无法正常工作。

步骤:

第一步:右箭头(对于下一张图片)是它必须在的位置，而左箭头不是。

第二步:如果您尝试调整浏览器的大小，如果您像平板电脑/手机一样缩小浏览器的宽度，您可以在左侧看到右箭头和左箭头。

如您所知，这并不好，因为我需要在图像上显示两个箭头(如全屏浏览器的右箭头)。

JQUERY 代码:

$(".rslides").responsiveSlides({
      auto: true,             // Boolean: Animate automatically, true or false
      speed: 1500,            // Integer: Speed of the transition, in milliseconds
      timeout: 3000,          // Integer: Time between slide transitions, in milliseconds
      pager: false,           // Boolean: Show pager, true or false
      nav: true,             // Boolean: Show navigation, true or false 
      random: true,          // Boolean: Randomize the order of the slides, true or false
      pause: false,           // Boolean: Pause on hover, true or false
      pauseControls: true,    // Boolean: Pause when hovering controls, true or false
      prevText: "",   // String: Text for the "previous" button
      nextText: "",       // String: Text for the "next" button
      maxwidth: "",           // Integer: Max-width of the slideshow, in pixels
      navContainer: "",       // Selector: Where controls should be appended to, default is after the 'ul'
      manualControls: "",    // Selector: Declare custom pager navigation  
      namespace: "rslides",   // String: Change the default namespace used
      before: function(){

      },   // Function: Before callback
      after: function(){
        if(counter<2){
            counter++;
        } else {
            counter = 0;
        }

      }     // Function: After callback
});


$('.post-type-archive-press, .tax-press-anno').find('.articles').masonry({
  itemSelector: 'article',
  gutter: 20,
});

var $nav = $('.rslides_nav').not('.bottom');
var $navOver = $('.rslides_nav:hover').not('bottom');

if($('.press-images > ul').children('li').length > 1){
  $('.press-images').attr('id', 'press-carousel');
  $('#press-carousel').carousel({itemsPerTransition:1, continuous:false, pagination:false, orientation: 'horizontal' , nextPrevActions:true, speed: 'slow'});
  $('.rs-carousel-action').html('');
}

$nav.css('margin-top', (Math.ceil(-$nav.parent().height()/2) + 'px'));
$nav.parent().resize(function(e){

  $nav.css('margin-top', (Math.ceil(-$nav.parent().height()/2) + 'px'));
  //$nav.css('margin-left', ('50px'));
  //$nav.css('margin-right', ('80px')); 
  $navOver.css('opacity', ('0.7')); 
  $navOver.css('opacity', ('1'));      
});

CSS:

.rslides {
 position: relative;
 list-style: none;
 overflow: hidden;
 width: 100%;
 padding: 0;
 margin: 0 auto;
}



.rslides li {
  -webkit-backface-visibility: hidden;
  position: absolute;
  display: none;
  width: 100%;
  left: 0;
  top: 0;
 }

.rslides li:first-child {
position: relative;
display: block;
}

.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;

}

.rslides_nav{
position:absolute;
display:block;
width:15px;
height:25px;
z-index:999;
}

.rslides_nav.prev{
background: url('../images/slider-nav.png') no-repeat 0 0;
margin-left:50px;
}

.rslides_nav.next{
background: url('../images/slider-nav.png') no-repeat -15px 0;
margin-right:50px;
}

那么如何将箭头放在图像的左侧和右侧，完全响应？

Answer 1

尝试改变

.rslides_nav.prev {
   margin-left: -30px;
}

到

.rslides_nav.prev {
   left: -30px;
}

它将解决您的第一个问题

对于第二个问题，尝试将 .rslides_nav.next 值更改为:

right: -30px;
margin-right: 50px;

对于@media only screen and (min-width: 1240px)

还有right: 50px用于其他媒体查询