te')); return $arr; } /* 遍历用户所有主题 * @param $uid 用户ID * @param int $page 页数 * @param int $pagesize 每页记录条数 * @param bool $desc 排序方式 TRUE降序 FALSE升序 * @param string $key 返回的数组用那一列的值作为 key * @param array $col 查询哪些列 */ function thread_tid_find_by_uid($uid, $page = 1, $pagesize = 1000, $desc = TRUE, $key = 'tid', $col = array()) { if (empty($uid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('uid' => $uid), array('tid' => $orderby), $page, $pagesize, $key, $col); return $arr; } // 遍历栏目下tid 支持数组 $fid = array(1,2,3) function thread_tid_find_by_fid($fid, $page = 1, $pagesize = 1000, $desc = TRUE) { if (empty($fid)) return array(); $orderby = TRUE == $desc ? -1 : 1; $arr = thread_tid__find($cond = array('fid' => $fid), array('tid' => $orderby), $page, $pagesize, 'tid', array('tid', 'verify_date')); return $arr; } function thread_tid_delete($tid) { if (empty($tid)) return FALSE; $r = thread_tid__delete(array('tid' => $tid)); return $r; } function thread_tid_count() { $n = thread_tid__count(); return $n; } // 统计用户主题数 大数量下严谨使用非主键统计 function thread_uid_count($uid) { $n = thread_tid__count(array('uid' => $uid)); return $n; } // 统计栏目主题数 大数量下严谨使用非主键统计 function thread_fid_count($fid) { $n = thread_tid__count(array('fid' => $fid)); return $n; } ?>javascript - Carousel padding on first item - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - Carousel padding on first item - Stack Overflow

programmeradmin3浏览0评论

I'm working with owl carousel using stage padding.

I'm using the carousel with loop:false. I'm trying to get the first item to be without padding on left and that after slide it keeps the same padding for both items on left and right.

So at page load it should be like this:

And on slide:

Using stage-padding gives padding both left and right. Giving space on first item as shown in my test.

The problem is that if I remove the padding-left (to get the first item attached on left without margin) I get this result on slide:

Any idea how can I solve this?

This is my markup:

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
</div>

$('.owl-carousel').owlCarousel({
    stagePadding: 40,
    loop:false,
    margin:2,
    nav:false,
    items:2
})

I'm working with owl carousel using stage padding.

I'm using the carousel with loop:false. I'm trying to get the first item to be without padding on left and that after slide it keeps the same padding for both items on left and right.

So at page load it should be like this:

And on slide:

Using stage-padding gives padding both left and right. Giving space on first item as shown in my test.

The problem is that if I remove the padding-left (to get the first item attached on left without margin) I get this result on slide:

Any idea how can I solve this?

This is my markup:

<div class="owl-carousel">
    <div class="item"><h4>1</h4></div>
    <div class="item"><h4>2</h4></div>
    <div class="item"><h4>3</h4></div>
    <div class="item"><h4>4</h4></div>
    <div class="item"><h4>5</h4></div>
    <div class="item"><h4>6</h4></div>
</div>

$('.owl-carousel').owlCarousel({
    stagePadding: 40,
    loop:false,
    margin:2,
    nav:false,
    items:2
})
Share Improve this question edited Mar 13, 2021 at 15:15 Masoud Keshavarz 2,2449 gold badges40 silver badges49 bronze badges asked Apr 29, 2015 at 12:46 propcodepropcode 3091 gold badge5 silver badges15 bronze badges
Add a ment  | 

4 Answers 4

Reset to default 4

Add This css it will be work fine:

.owl-stage{padding-left:0px !important;}

Or if you want rtl:

.owl-stage{padding-right:0px !important;}

Its from inline style, try to find this line and remove padding-left like this:

<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); 
transition: all 0s ease 0s; width: 11132px; 
padding-left: 0px; padding-right: 40px;">.. </div>

u can add "left" just like this: $('.owl-carousel').owlCarousel({ stagePadding: 40, loop:false, margin:2, nav:false, items:2, left: -30 })

you can this simple start in right use this code

.owl-stage {
    right: -32px;
 }

or start in left use this code simple

.owl-stage {
    left: -32px;
 }

you use tag style in your CSS on inline in your code

发布评论

评论列表(0)

  1. 暂无评论