CarouFredSel插件将高度调整为低像素？ [英] CarouFredSel plugin adjusting height to a low pixel?

问题描述

这就是有问题的设计。



这是我的jQuery：

 $（）。ready（ function （）{
  //  使用自定义配置 
 $（' ＃main-carousel '）。carouFredSel（{
 items： 2 ，
 direction：  left，
 responsive： true ，
 width：'  100％'，
 height：'  auto'，
 scroll：{
 items： 1 ，
 easing：  elastic，
持续时间： 1000 ，
 pauseOnHover： true  
} 
}）; 
}）; 

我的HTML：



< pre lang =HTML> <！ - CAROUSEL - >
< div class = row carousel >
< div class = col-sm-12 >
< script type = text / javascript src = <？php echo __ASSET_PATH__？> / js / jquery .carouFredSel.min.js > < / 脚本 >
< script type = text / javascript src = <？php echo __ASSET_PATH__？> ; /js/jcarousel.js > < / script >
< div id = main-carousel >

< div >
< img src = <？php echo __ASSET_PATH__？> /img/swaf-hero-bus.jpg alt = SWAF-hero-bus title = / >

< span class = content > 了解Fleet Refinish < span class = action > < / span > < / span >

< / div >

< div >
< img src = <？php echo __ASSET_PATH__？> /img/swaf-hero-bus.jpg alt = SWAF-hero-bus title = / >

< span class = content > 了解Fleet Refinish < ; span class < span class =code-keyword> = action > < / span > < / span & gt;

< / div >

< / div >
< / div >
< / div > <！ - END .CAROUSEL - >

我没有CSS ..我不明白为什么它通过插件本身将它最小化为40px。由于此布局具有响应性，因此将调整高度。因此它可以最小化或最大化，所以我不想特别设置一个定义的高度。



任何想法？

解决方案

（）。ready（ function （）{
// 使用自定义配置

（' #main-carousel'）。carouFredSel（{
items： 2 ，
方向： left，
responsive： true ，
宽度：' 100％'，
height：' auto'，
scroll：{
items： 1 ，
easing： elastic，
持续时间： 1000 ，
pauseOnHover： true
}
}）;
}）;

我的HTML：



< pre lang =HTML> <！ - CAROUSEL - >
< div class = row carousel >
< div class = col-sm-12 >
< script type = text / javascript src = <？php echo __ASSET_PATH__？> / js / jquery .carouFredSel.min.js > < / 脚本 >
< script type = text / javascript src = <？php echo __ASSET_PATH__？> ; /js/jcarousel.js > < / script >
< div id = main-carousel >

< div >
< img src = <？php echo __ASSET_PATH__？> /img/swaf-hero-bus.jpg alt = SWAF-hero-bus title = / >

< span class = content > 了解Fleet Refinish < span class = action > < / span > < / span >

< / div >

< div >
< img src = <？php echo __ASSET_PATH__？> /img/swaf-hero-bus.jpg alt = SWAF-hero-bus title = / >

< span class = content > 了解Fleet Refinish < ; span class < span class =code-keyword> = action > < / span > < / span & gt;

< / div >

< / div >
< / div >
< / div > <！ - END .CAROUSEL - >

我没有CSS ..我不明白为什么它通过插件本身将它最小化为40px。由于此布局具有响应性，因此将调整高度。因此它可以最小化或最大化，所以我不想特别设置一个定义的高度..



有什么想法吗？

Uncaught TypeError：Object [object Object]没有方法'bxSlider'jcarousel.js：2

That's the design in question.

Here is my jQuery:

$().ready(function() {
	// Using custom configuration
    $('#main-carousel').carouFredSel({
        items               : 2,
        direction           : "left",
        responsive          : true,
        width               : '100%',
        height              : 'auto',
        scroll : {
            items           : 1,
            easing          : "elastic",
            duration        : 1000,                         
            pauseOnHover    : true
        }
    });
});

My HTML:

<!-- CAROUSEL -->
<div class="row carousel">
    <div class="col-sm-12">
        <script type="text/javascript" src="<?php echo __ASSET_PATH__ ?>/js/jquery.carouFredSel.min.js"></script>
        <script type="text/javascript" src="<?php echo __ASSET_PATH__ ?>/js/jcarousel.js"></script>
        <div id="main-carousel">

            <div>
                <img src="<?php echo __ASSET_PATH__ ?>/img/swaf-hero-bus.jpg" alt="SWAF-hero-bus" title="" />

                <span class="content">Learn About Fleet Refinish<span class="action"> </span></span>

            </div>

            <div>
                <img src="<?php echo __ASSET_PATH__ ?>/img/swaf-hero-bus.jpg" alt="SWAF-hero-bus" title="" />

                <span class="content">Learn About Fleet Refinish<span class="action"> </span></span>

            </div>

        </div>
    </div>
</div> <!-- END .CAROUSEL -->

I have no CSS on it.. I don't understand why it's minimizing it to 40px through the plugin itself. The height will adjust since this layout is responsive. So it could minimize or maximize so I don't want to set a defined height in particular..

Any ideas?

解决方案

().ready(function() { // Using custom configuration

('#main-carousel').carouFredSel({ items : 2, direction : "left", responsive : true, width : '100%', height : 'auto', scroll : { items : 1, easing : "elastic", duration : 1000, pauseOnHover : true } }); });

My HTML:

<!-- CAROUSEL -->
<div class="row carousel">
    <div class="col-sm-12">
        <script type="text/javascript" src="<?php echo __ASSET_PATH__ ?>/js/jquery.carouFredSel.min.js"></script>
        <script type="text/javascript" src="<?php echo __ASSET_PATH__ ?>/js/jcarousel.js"></script>
        <div id="main-carousel">

            <div>
                <img src="<?php echo __ASSET_PATH__ ?>/img/swaf-hero-bus.jpg" alt="SWAF-hero-bus" title="" />

                <span class="content">Learn About Fleet Refinish<span class="action"> </span></span>

            </div>

            <div>
                <img src="<?php echo __ASSET_PATH__ ?>/img/swaf-hero-bus.jpg" alt="SWAF-hero-bus" title="" />

                <span class="content">Learn About Fleet Refinish<span class="action"> </span></span>

            </div>

        </div>
    </div>
</div> <!-- END .CAROUSEL -->

I have no CSS on it.. I don't understand why it's minimizing it to 40px through the plugin itself. The height will adjust since this layout is responsive. So it could minimize or maximize so I don't want to set a defined height in particular..

Any ideas?

Uncaught TypeError: Object [object Object] has no method 'bxSlider' jcarousel.js:2

这篇关于CarouFredSel插件将高度调整为低像素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！