如何让猫头鹰旋转木马适合窗户？

时间：2018-04-05 03:20:48

标签： carousel owl-carousel

抱歉，我不知道如何正确地将代码放入代码段。这是我的猫头鹰旋转木马，它的宽度在窗户外朝右方向变大。我是新手，我用Google搜索但找不到正确的帖子。我需要帮助才能将猫头鹰旋转木马放在窗户内。 以下是它的外观。

enter image description here

＆＃13;
＆＃13; 
set.seed(123)
n= 15*24 + 3
dt <- data.table(t=1:n)
dt[, y := abs(sin(2*pi*t/25.4)) + rnorm(n,1,0.2)]

dt[,t_in_day := t%%24]
dt[,day := floor(t/24)]
dt2 <- copy(dt)
dt2[,day := day-1]

dt2[,t_in_day := t_in_day + 24]
dt <- dt[day<max(day)]
dd <- rbind(dt, dt2)
dd <- dd[day>-1]

dd[, day_str := sprintf("day\n%03d",(day+1))]

col1<-c()

break1=10
rbPal <- colorRampPalette(c('red','yellow'))
col1 <- rbPal(break1)[as.numeric(cut(dd[,y],breaks = break1))]

cuts<-levels(cut(dd[,y],breaks = break1))
cuts<-gsub(","," - ",cuts)
cuts<-gsub("\\(","[",cuts)

ggplot(dd,aes(x=t_in_day,y=dd[,y]),fill=cuts) +
geom_bar(stat="identity",fill=col1) + 
facet_grid(day_str ~ .) + scale_x_continuous(name="time (h)",breaks = 0:8 * 6)+
scale_y_continuous(name="y")+
scale_fill_manual(values=rbPal(break1),labels=cuts)
＆＃13; 
var owl = $('.owl-carousel');
owl.owlCarousel({
    loop: true,
    margin: 10,
    padding: 10,
    responsiveClass: true,
    rtl: false,
    stagePadding: 100,
    smartSpeed: 550,
    autoplay: true,
    autoplayTimeout: 1000,
    autoplayHoverPause: true,
    nav: true,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: true
        },
        600: {
            items: 3,
            nav: true
        },
        1000: {
            items: 5,
            nav: true,
            
        }
    }
})
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY > 0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});
＆＃13; 
 html{
            width: 100vw;
            background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
        }
    .demo-container{
        margin-top: 5em;
        background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
    }
    .owl-carousel .owl-stage-outer{
        overflow: visible;
    }
    .sb-carousel-wrap {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
    position: absolute;
    top: 0;
    width: 105px;
    height: 100%;
    z-index: 10;
}
.brand-carousel-gradient.left {
    left: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img:hover{
    padding: 0.5em 0em 0em 0em;
    background: url("phone.png") no-repeat center;
    background-size: cover;
    z-index: 1;
}
.sb-itm-img:hover {
    padding: 2.3em 2em 4em 2em;
}
＆＃13;
＆＃13;
＆＃13;

1 个答案:

答案 0 :(得分：0)

尝试以下实施的滑块

＆＃13;
＆＃13; 
var owl = $('.owl-carousel');
owl.owlCarousel({
    loop: true,
    margin: 10,
    padding: 10,
    responsiveClass: true,
    rtl: false,
    stagePadding: 100,
    smartSpeed: 550,
    autoplay: true,
    autoplayTimeout: 1000,
    autoplayHoverPause: true,
    nav: true,
    responsiveClass: true,
    responsive: {
        0: {
            items: 1,
            nav: true
        },
        600: {
            items: 3,
            nav: true
        },
        1000: {
            items: 5,
            nav: true,
            
        }
    }
})
owl.on('mousewheel', '.owl-stage', function (e) {
    if (e.deltaY > 0) {
        owl.trigger('next.owl');
    } else {
        owl.trigger('prev.owl');
    }
    e.preventDefault();
});
＆＃13; 
html{
            width: 100vw;
            background: linear-gradient(0deg,#aaaaaa,#f0f0f0) no-repeat;
        }
    .demo-container{
        margin-top: 5em;
        background: linear-gradient(0deg,#aaaaaa,#f0f0f0);
    }
    .owl-carousel .owl-stage-outer{
        overflow: visible;
    }
    .sb-carousel-wrap {
    position: relative;
    margin-left: -15px;
    margin-right: -15px;
    z-index: 1;
}
.sb-carousel-wrap .brand-carousel-gradient {
    position: absolute;
    top: 0;
    width: 105px;
    height: 100%;
    z-index: 10;
}
.brand-carousel-gradient.left {
    left: 0;
    background-image: linear-gradient(to left, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.brand-carousel-gradient.right {
    right: 0;
    background-image: linear-gradient(to right, rgba(255, 255, 255, 0.0), #fbfbfb);
}
.sb-car-img{
	overflow: hidden;
}
.sb-car-img:hover img{
     transform: scale(1.2);
}

.sb-itm-img  {
  	transition: all 0.6s ease-in 0s;
	-webkit-transition:  all 0.6s ease-in 0s;
	-ms-transition:  all 0.6s ease-in 0s;
}
.my-slider{
	float: left:
	width:100%;
	padding: 0 15px;
	overflow: hidden;
}
＆＃13; 
<div class="my-slider">
<div class="sb-carousel-wrap">
        <div class="brand-carousel-gradient left"></div>
        <div class="brand-carousel-gradient right"></div>
       <div class="demo-container">
         <div class="owl-carousel owl-theme">
    
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
    
            </div>
            <div class="item">
                <div class="sb-car-img">
                    <img src="https://images.pexels.com/photos/923361/pexels-photo-923361.jpeg?auto=compress&cs=tinysrgb&h=350" class="sb-itm-img" alt="">
                </div>
    
    
            </div>
    
        </div>
    </div>
    </div>
</div>
<link rel="stylesheet" type="text/css" href="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/assets/owl.carousel.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="https://owlcarousel2.github.io/OwlCarousel2/assets/owlcarousel/owl.carousel.js"></script>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题