Question

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

步骤进行：

第一步：右箭头（下一张图片）就在那里，左箭头不是。

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

您可以理解它并不好，因为我需要在图像上方放置两个箭头（如使用全屏浏览器的右箭头）。

JQUERY CODE：

$(".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用于其他媒体查询

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

步骤进行：

1 个答案: