jquery – 自适应bxSlider宽度或中心图像（自适应div）

25-02-01 23

本文的目的是介绍jquery–自适应bxSlider宽度或中心图像的详细情况，特别关注自适应div的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解jquery–自适应

本文的目的是介绍jquery – 自适应bxSlider宽度或中心图像的详细情况，特别关注自适应div的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解jquery – 自适应bxSlider宽度或中心图像的机会，同时也不会遗漏关于BootStrap、jQuery UI、bxSlider组件使用、HTML5视频无法在iPad上使用jquery bxSlider插件、javascript原生和jquery库实现iframe自适应高度和宽度_jquery、jQuery bxSlider问题的知识。

本文目录一览：

jquery – 自适应bxSlider宽度或中心图像（自适应div）
BootStrap、jQuery UI、bxSlider组件使用
HTML5视频无法在iPad上使用jquery bxSlider插件
javascript原生和jquery库实现iframe自适应高度和宽度_jquery
jQuery bxSlider问题

jquery – 自适应bxSlider宽度或中心图像（自适应div）

我有一个幻灯片,上面有许多不同宽高比的图片.我希望图像在幻灯片中居中.我该怎么做,甚至更好,如何自动调整滑块大小？

最佳答案

解决中心问题

.bx-wrapper img {
    margin: 0 auto;
}

slideWidth option

每张幻灯片的宽度.所有水平转盘都需要此设置！

像这样：

JS：

$('.bxslider').bxSlider({
   mode: 'fade',captions: true,pagerCustom: '#bx-pager',adaptiveHeight: true,slideWidth: 300
});

HTML：

BootStrap、jQuery UI、bxSlider组件使用

#组件的使用

首先需要将组件下载下来放在统同级目录下
导入组件
使用组件

###BootStrap 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap.css">
    <link rel="stylesheet" href="bootstrap-3.3.7-dist/css/bootstrap-theme.css">
</head>
<body>
<div>
<!--    使用表单组件-->
    <formrole="search">
        <div>
            <input type="text"placeholder="Search">
        </div>
        <button type="submit">Submit</button>
</form>
    <div></div>
</div>
<div>
<!--    使用图标-->
    <span></span>
</div>
<script src="jQuery-3.4.0.js"></script>
<script src="bootstrap-3.3.7-dist/js/bootstrap.js"></script>
</body>
</html>

###jQuery UI 示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="jquery-ui-1.12.1/jquery-ui.css">
</head>
<body>
<div id="slider"></div>
<script src="jQuery-3.4.0.js"></script>
<script src="jquery-ui-1.12.1/jquery-ui.js"></script>
<script>
  $(function() {
    $( "#slider" ).slider();
  });
  </script>
</body>
</html>

###bxSlider

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="bxslider-4-4.2.12/src/css/jquery.bxslider.css">
</head>
<body>
<div>
    <div><img src="1.JPG" /></div>
    <div><img src="2.JPG" /></div>
</div>
<script src="jQuery-3.4.0.js"></script>
<script src="bxslider-4-4.2.12/src/js/jquery.bxslider.js"></script>
<script>
$(document).ready(function(){
    $(''.slider'').bxSlider({
        auto: true,
        pause: 2000,
    //  其他参数
    });
});
</script>
</body>
</html>

#####常用参数 |参数|描述|默认值| |-|-| |mode|设置滑动模式，''horizontal'':水平, ''vertical'':垂直, ''fade'':淡入淡出|horizontal| |speed|内容切换速度，数字，ms|500| |startSlide|初始滑动位置，数字|0| |randomStart|随机初始滑动位置|true| |infiniteLoop|循环滑动，如果设置为true时，则到最后滑动位置时会切换到初始位置|true| |easing|切换动画扩展，可以借助jQuery Easing 动画效果扩展设置不同的切换动画效果|null| |captions|设置显示图片标题，当滑动内容为图片时并设置属性title，可以显示图片标题|false||video|支持视频，当设置为true时，需要jquery.fitvids.js支持|false||pager|设置是否显示分页，设置为true时，会在滑动内容下方显示分页图标|true| |controls|设置是否显示上一副和下一幅按钮|true| |auto|设置是否自动滑动|false| |pause|自动滑动时停留时间，数字，ms|4000| |autoHover|当鼠标滑向滑动内容上时，是否暂停滑动|false|

HTML5视频无法在iPad上使用jquery bxSlider插件

我正在使用Jquery bxSlider插件为iPad创建图片和视频的滑块。我正在使用HTML5视频标签进行视频实施：

<video width="400" height="260" controls>
<source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4; codecs="avc1.42E01E,mp4a.40.2"' />
</video>

视频源代码在iPad上工作正常，但是当与滑块标记合并时，视频不播放。

测试链接：http://www.ekimmedia.com/totem/TIC/MG/

如果我删除这个脚本：

<script src="js/jquery.bxSlider.js" type="text/javascript"></script>

从源代码，视频然后在iPad上工作。

测试链接与bxSlider脚本删除：http://www.ekimmedia.com/totem/TIC/MG/index10.html

不确定是什么导致冲突。

谢谢，

解决方法

我得到这个滑块工作的唯一方法是从bxslider官方网站下载它。并尝试跟随他们的 tutorial如何使响应视频滑块。他们没有提到这些箭头图像的任何地方，因为他们没有进入css。所以，请记住从下载的bxslider zip抓取一个图像文件夹，并将其粘贴到项目的js文件夹中。

在我的最终设置中，我在js文件夹中有4个本地文件：jquery-2.2.2.min.js，jquery.bxslider.css，jquery.bxslider.js和jquery.fitvids.js。 js文件夹还包括images.png和bx_loader.gif的图像子文件夹。

这一切都在HTML文件中被引用如下：

<head>
  <link rel="stylesheet" href="js/jquery.bxslider.css">
  <script src="js/jquery-2.2.2.min.js"></script>
  <script src="js/jquery.fitvids.js"></script>
  <script src="js/jquery.bxslider.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
    $('.bxslider').bxSlider({
      video: true,useCSS: false
    });
  });
  </script>
</head>
<body>
    <ul>
        <li>
            <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </li>
        <li>
            <iframe src="YOUR_LINK_TO_VIDEO" width="400" height="260" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
        </li>
    </ul>
</body>

我已经在iOS设备上测试了我的解决方案，一切似乎都可以正常工作。这个问题有一些类似的solution，你也可以看看。

javascript原生和jquery库实现iframe自适应高度和宽度_jquery

javascript原生和jquery库实现iframe自适应内容高度和宽度---推荐使用jquery的代码！

&#8205;<iframe src="index.php" id="mainiframe" name="mainiframe" width="100%" frameborder="0" scrolling="no" marginwidth="0" marginheight="0"></iframe>

登录后复制

基于Jquery库的代码很好实现：

<script language="javascript" type="text/javascript"> 
$(document).ready(function(){ 
$("#mainframe").load(function(){ 
$(this).height(0); //用于每次刷新时控制IFRAME高度初始化 
var height = $(this).contents().height() + 10; 
$(this).height( height < 500 &#63; 500 : height ); 
}); 
}); 
</script>

登录后复制

‍基于JS原生代码的实现：

<script language="javascript"> 
if (window.parent.length>0){window.parent.document.all.mainframe.style.height=document.body.scrollHeight;} 
</script>

登录后复制

只需在你被iframe调用的文件之后加入上面这段即可!
这个也可以控制iframe的高度随内容的多而自动增长

<iframe name="web" width="100%" frameborder=0 height="100%" src="index.php" id="web" onload="this.height=web.document.body.scrollHeight+20" ></iframe>

登录后复制

jquery库实现iframe自适应内容高度和宽度

jQuery bxSlider问题

我正面临一个奇怪的问题,我似乎无法找到解决方案.对于我的一个项目,我使用的是bxSlider.有两个自定义按钮,上一个和下一个切换滑动.这一切都很有效,除了滑块在第一次点击后“重新启动”(下一个或上一个无关紧要).

为此,我正在使用这些功能：

$('#Slider2').bxSlider({
        auto: false,speed: 1000,mode: 'horizontal'
    });

    $('#SlidePrev').click(function(){
        var slider  = $('#Slider2').bxSlider();
        var slideNr = slider.getCurrentSlide() - 1;

        //slider.goToSlide(slideNr);
        slider.goToPrevIoUsSlide();

    });

    $('#SlideNext').click(function(){
        var slider  = $('#Slider2').bxSlider();
        var slideNr = slider.getCurrentSlide() + 1;

        slider.goToSlide(slideNr); 
    });

如果我使用函数goToSlide(index)或goToPrevIoUsSlide()/ goToNextSlide()并不重要.

可以找到一个实例.here.尝试单击箭头以滑过集合.

解决方法

这将是一个问题：

http://pastebin.com/Psz1dDqE

你需要将初始设置返回到var滑块.不要创建一个新的.

今天的关于jquery – 自适应bxSlider宽度或中心图像和自适应div的分享已经结束，谢谢您的关注，如果想了解更多关于BootStrap、jQuery UI、bxSlider组件使用、HTML5视频无法在iPad上使用jquery bxSlider插件、javascript原生和jquery库实现iframe自适应高度和宽度_jquery、jQuery bxSlider问题的相关知识，请在本站进行查询。

本文标签：