当前位置： 文江博客话题详情

如何控制 coda 滑块上的滚动方向？

发布于 2024-08-30 07:12:52 字数 5775 浏览 12 评论 0原文

我有一个尾部滑块，无法确定滚动的方向。我有 3 个面板，我想从左向右滚动。有时它从左到右滚动，有时向上和向下滚动，有时水平滚动。

如何锁定它以我想要的方向行驶？

这是 HTML：

<body>
 <div id="slider_home" class="round_10px">
 <ul class="navigation_home">
  <li><a href="#scroll_Parents" class="round_10px">Information For Parents</a></li>
  <li><a href="#scroll_Materials" class="round_10px">Print Materials</a></li>
  <li><a href="#scroll_Resources" class="round_10px">Online Resources</a></li>
 </ul>  
  <div id="scroll_bg_home">
   <div class="scroll_home">
    <div class="scrollContainer_home">
     <div class="panel_home" id="scroll_Parents">
                                      content
     </div>
     <div class="panel_home" id="scroll_Materials">
                                      content
     </div>
     <div class="panel_home" id="scroll_Resources">
                                      content
     </div>
    </div>
   </div>
  </div>
 </div>
</body>

这是 CSS：

#wrapper {width:550px;margin:0px auto;}

#intro {padding-bottom:10px;}

h2 {margin:0;margin-bottom:14px;padding:0;}

#slider {width:631px;margin:10px auto 0px auto;position:relative;}

#scroll_bg{height:360px;width:590px;overflow:hidden;position:relative;clear:left;background:#FFFFFF url(images/) no-repeat; margin:0px auto 0px auto}

.scroll{ background:transparent; width:550px; height:370px; padding:0px; margin:0px auto; overflow:hidden; }

.scrollContainer div.panel {padding:20px 0px;height:330px; width:550px;margin:0px;float:left;}

#shade {background:#EDEDEC url(images/shade.jpg) no-repeat 0 0;height:50px;}

ul.navigation {list-style:none;margin:0px 0px 0px 23px;padding:0px;padding-bottom:0px;}

ul.navigation li {display:inline; margin-right:5px;}

ul.navigation li a { background:#FFFFFF;font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#CCCCCC;padding:5px 5px 5px 5px;border:1px #F4F4F4 solid;text-decoration: none;}

ul.navigation  a:hover { color:#EDEDEC;border:1px #E6E6E6 solid;}

ul.navigation a.selected {color:#333333;}

ul.navigation a:focus {outline:none;}

.scrollButtons {position:absolute;top:150px;cursor:pointer;}

.scrollButtons.left {left:-37px;top:20px}

.scrollButtons.right {right:-32px;top:20px;}

.hide {display:none;}

这是 Jquery 包含文件：

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider_home .scrollContainer_home > div.panel_home');
var $container = $('#slider_home .scrollContainer_home');

// if true, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });

  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll_bg = $('#scroll_bg_home');
var $scroll = $('#slider_home .scroll_home').css('overflow', 'hidden');

// apply our left + right buttons
$scroll_bg
  .before('<img class="scrollButtons_home left" src="styles/images/BackFlip.jpg" />')
  .after('<img class="scrollButtons_home right" src="styles/images/flipForward.jpg" />');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('.navigation_home').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('.navigation_home').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('.navigation_home a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow

  // can be a selector which will be relative to the target
  items: $panels,

  navigation: '.navigation_home a',

  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left', 
  next: 'img.right',

  // allow the scroll effect to run both directions
  axis: 'xy',

  onAfter: trigger, // our final callback

  offset: offset,

  // duration of the sliding effect
  duration: 500,

  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#slider_home').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});
原文

I have a coda slider and am unable to determine the direction of the scroll. I have 3 panels that I want to scroll left to right. Sometimes it scrolls left to right, sometimes up and down, and sometimes horizontally.

How do I lock it down to go the direction I want?

Here is the HTML:

<body>
 <div id="slider_home" class="round_10px">
 <ul class="navigation_home">
  <li><a href="#scroll_Parents" class="round_10px">Information For Parents</a></li>
  <li><a href="#scroll_Materials" class="round_10px">Print Materials</a></li>
  <li><a href="#scroll_Resources" class="round_10px">Online Resources</a></li>
 </ul>  
  <div id="scroll_bg_home">
   <div class="scroll_home">
    <div class="scrollContainer_home">
     <div class="panel_home" id="scroll_Parents">
                                      content
     </div>
     <div class="panel_home" id="scroll_Materials">
                                      content
     </div>
     <div class="panel_home" id="scroll_Resources">
                                      content
     </div>
    </div>
   </div>
  </div>
 </div>
</body>

Here is the CSS:

#wrapper {width:550px;margin:0px auto;}

#intro {padding-bottom:10px;}

h2 {margin:0;margin-bottom:14px;padding:0;}

#slider {width:631px;margin:10px auto 0px auto;position:relative;}

#scroll_bg{height:360px;width:590px;overflow:hidden;position:relative;clear:left;background:#FFFFFF url(images/) no-repeat; margin:0px auto 0px auto}

.scroll{ background:transparent; width:550px; height:370px; padding:0px; margin:0px auto; overflow:hidden; }

.scrollContainer div.panel {padding:20px 0px;height:330px; width:550px;margin:0px;float:left;}

#shade {background:#EDEDEC url(images/shade.jpg) no-repeat 0 0;height:50px;}

ul.navigation {list-style:none;margin:0px 0px 0px 23px;padding:0px;padding-bottom:0px;}

ul.navigation li {display:inline; margin-right:5px;}

ul.navigation li a { background:#FFFFFF;font-family:Arial, Helvetica, sans-serif; font-size:16px; font-weight:bold; color:#CCCCCC;padding:5px 5px 5px 5px;border:1px #F4F4F4 solid;text-decoration: none;}

ul.navigation  a:hover { color:#EDEDEC;border:1px #E6E6E6 solid;}

ul.navigation a.selected {color:#333333;}

ul.navigation a:focus {outline:none;}

.scrollButtons {position:absolute;top:150px;cursor:pointer;}

.scrollButtons.left {left:-37px;top:20px}

.scrollButtons.right {right:-32px;top:20px;}

.hide {display:none;}

And here is the Jquery includes file:

// when the DOM is ready...
$(document).ready(function () {

var $panels = $('#slider_home .scrollContainer_home > div.panel_home');
var $container = $('#slider_home .scrollContainer_home');

// if true, we'll float all the panels left and fix the width 
// of the container
var horizontal = true;

// float the panels left if we're going horizontal
if (horizontal) {
  $panels.css({
    'float' : 'left',
    'position' : 'relative' // IE fix to ensure overflow is hidden
  });

  // calculate a new width for the container (so it holds all panels)
  $container.css('width', $panels[0].offsetWidth * $panels.length);
}

// collect the scroll object, at the same time apply the hidden overflow
// to remove the default scrollbars that will appear
var $scroll_bg = $('#scroll_bg_home');
var $scroll = $('#slider_home .scroll_home').css('overflow', 'hidden');

// apply our left + right buttons
$scroll_bg
  .before('<img class="scrollButtons_home left" src="styles/images/BackFlip.jpg" />')
  .after('<img class="scrollButtons_home right" src="styles/images/flipForward.jpg" />');

// handle nav selection
function selectNav() {
  $(this)
    .parents('ul:first')
      .find('a')
        .removeClass('selected')
      .end()
    .end()
    .addClass('selected');
}

$('.navigation_home').find('a').click(selectNav);

// go find the navigation link that has this target and select the nav
function trigger(data) {
  var el = $('.navigation_home').find('a[href$="' + data.id + '"]').get(0);
  selectNav.call(el);
}

if (window.location.hash) {
  trigger({ id : window.location.hash.substr(1) });
} else {
  $('.navigation_home a:first').click();
}

// offset is used to move to *exactly* the right place, since I'm using
// padding on my example, I need to subtract the amount of padding to
// the offset.  Try removing this to get a good idea of the effect
var offset = parseInt((horizontal ? 
  $container.css('paddingTop') : 
  $container.css('paddingLeft')) 
  || 0) * -1;


var scrollOptions = {
  target: $scroll, // the element that has the overflow

  // can be a selector which will be relative to the target
  items: $panels,

  navigation: '.navigation_home a',

  // selectors are NOT relative to document, i.e. make sure they're unique
  prev: 'img.left', 
  next: 'img.right',

  // allow the scroll effect to run both directions
  axis: 'xy',

  onAfter: trigger, // our final callback

  offset: offset,

  // duration of the sliding effect
  duration: 500,

  // easing - can be used with the easing plugin: 
  // http://gsgd.co.uk/sandbox/jquery/easing/
  easing: 'swing'
};

// apply serialScroll to the slider - we chose this plugin because it 
// supports// the indexed next and previous scroll along with hooking 
// in to our navigation.
$('#slider_home').serialScroll(scrollOptions);

// now apply localScroll to hook any other arbitrary links to trigger 
// the effect
$.localScroll(scrollOptions);

// finally, if the URL has a hash, move the slider in to position, 
// setting the duration to 1 because I don't want it to scroll in the
// very first page load.  We don't always need this, but it ensures
// the positioning is absolutely spot on when the pages loads.
scrollOptions.duration = 1;
$.localScroll.hash(scrollOptions);

});

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（1）

音盲 2024-09-06 07:12:52

您还在寻找答案吗？

无论如何，我想我可以帮助你。

如果您使用的是 Coda Slide (3.0) 的最新稳定版本，请按照以下步骤操作：

  1. 转到放置 .js 文件的位置并找到“jQuery.coda-slider-3.0.js”。
  2. 打开此文件并转到第 374 行或搜索“$.fn.codaSlider.options”，是第二个结果）。
  3. 现在将选项“autoSliderDirection：'right'”编辑为所需的方向。

Following the documentation of Coda Slider, you can set and modify this options to your slide:

      autoHeight: true,
      autoHeightEaseDuration: 1500,
      autoHeightEaseFunction: "easeInOutExpo",
      autoSlide: false,
      autoSliderDirection: 'right',
      autoSlideInterval: 7000,
      autoSlideControls: false,
      autoSlideStartText: 'Start',
      autoSlideStopText: 'Stop',
      autoSlideStopWhenClicked: true,
      continuous: true,
      dynamicArrows: true,
      dynamicArrowsGraphical: false,
      dynamicArrowLeftText: "« left",
      dynamicArrowRightText: "right »",
      dynamicTabs: true,
      dynamicTabsAlign: "center",
      dynamicTabsPosition: "top",
      firstPanelToLoad: 1,
      panelTitleSelector: "h2.title",
      slideEaseDuration: 1500,
      slideEaseFunction: "easeInOutExpo"

希望我对你有帮助。如果是，请给我反馈:)

You still is looking for a answer?

Anyway, I think I can help you.

If you're using the last stable version of Coda Slide (3.0), follow these steps:

  1. Go where you put the .js file and find "jQuery.coda-slider-3.0.js".
  2. Open this file and go to line 374 or search for "$.fn.codaSlider.options", is the second result).
  3. Now edit the option "autoSliderDirection: 'right'" to the desired direction.

Following the documentation of Coda Slider, you can set and modify this options to your slide:

      autoHeight: true,
      autoHeightEaseDuration: 1500,
      autoHeightEaseFunction: "easeInOutExpo",
      autoSlide: false,
      autoSliderDirection: 'right',
      autoSlideInterval: 7000,
      autoSlideControls: false,
      autoSlideStartText: 'Start',
      autoSlideStopText: 'Stop',
      autoSlideStopWhenClicked: true,
      continuous: true,
      dynamicArrows: true,
      dynamicArrowsGraphical: false,
      dynamicArrowLeftText: "« left",
      dynamicArrowRightText: "right »",
      dynamicTabs: true,
      dynamicTabsAlign: "center",
      dynamicTabsPosition: "top",
      firstPanelToLoad: 1,
      panelTitleSelector: "h2.title",
      slideEaseDuration: 1500,
      slideEaseFunction: "easeInOutExpo"

Hope I helped you. If yes, give me the feedback :)

回复 原文
~没有更多了~

关于作者

南…巷孤猫

暂无简介

0 文章
0 评论
24 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

初遇

文章 0 评论 0

听闻余生

文章 0 评论 0

Z_dy

文章 0 评论 0

左岸枫

文章 0 评论 0

1848719402

文章 0 评论 0

婷

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文