javascript - 如何使用jquery编写 Bootstrap 轮播元素？

标签 javascript jquery wordpress twitter-bootstrap bootstrap-carousel

This is the site 。您不必访问该网站，一切都写在这里。这是 WordPress 使用旧的 WordPress 主题，我无法修改该主题以使图像看起来像带有缩略图的幻灯片。我可以访问页眉和页脚来编写所需的 css 和 javascript，但很难找到哪个函数正在回显图像并手动编写类。我可以使用 jquery 编辑类

所以我举了这个例子

// thumbnails.carousel.js jQuery plugin
;(function(window, $, undefined) {

	var conf = {
		center: true,
		backgroundControl: false
	};

	var cache = {
		$carouselContainer: $('.thumbnails-carousel').parent(),
		$thumbnailsLi: $('.thumbnails-carousel li'),
		$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
	};

	function init() {
		cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
		cache.$thumbnailsLi.first().addClass('active-thumbnail');

		if(!conf.backgroundControl) {
			cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
		}
		else {
			cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
		}

		if(conf.center) {
			cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
		}
	}

	function refreshOpacities(domEl) {
		cache.$thumbnailsLi.removeClass('active-thumbnail');
		cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
	}	

	function bindUiActions() {
		cache.$carouselContainer.on('slide.bs.carousel', function(e) {
  			refreshOpacities(e.relatedTarget);
		});

		cache.$thumbnailsLi.click(function(){
			cache.$carouselContainer.carousel($(this).index());
		});
	}

	$.fn.thumbnailsCarousel = function(options) {
		conf = $.extend(conf, options);

		init();
		bindUiActions();

		return this;
	}

})(window, jQuery);

$('.thumbnails-carousel').thumbnailsCarousel();
/*         Just for demo     */
body {
  padding: 10px;
  text-align: center;
}
#carousel-example-generic {
  display: inline-block;
}
/*****************************/

/* Plugin styles */
ul.thumbnails-carousel {
	padding: 5px 0 0 0;
	margin: 0;
	list-style-type: none;
	text-align: center;
}
ul.thumbnails-carousel .center {
	display: inline-block;
}
ul.thumbnails-carousel li {
	margin-right: 5px;
	float: left;
	cursor: pointer;
}
.controls-background-reset {
	background: none !important;
}
.active-thumbnail {
	opacity: 0.4;
}
.indicators-fix {
	bottom: 70px;
}
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- bootstrap carousel -->
	<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
	  <!-- Indicators -->
	  <ol class="carousel-indicators">
	    <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
	    <li data-target="#carousel-example-generic" data-slide-to="3"></li>
	  </ol>

	  <!-- Wrapper for slides -->
	  <div class="carousel-inner">

	    <div class="item active srle">
	      <img src="https://s28.postimg.org/4237b0cjh/image.jpg" alt="1.jpg" class="img-responsive">
	      <div class="carousel-caption">
	        <p> 1.jpg </p>
	      </div>
	    </div>

	    <div class="item">
	      <img src="https://s29.postimg.org/xaf064313/image.jpg" alt="2.jpg" class="img-responsive">
	      <div class="carousel-caption">
	        <p> 2.jpg </p>
	      </div>
	    </div>

	    <div class="item">
	      <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" alt="3.jpg" class="img-responsive">
	      <div class="carousel-caption">
	        <p> 3.jpg </p>
	      </div>
	    </div>

	    <div class="item">
	      <img src="https://s7.postimg.org/4z602gd8b/image.jpg" alt="4.jpg" class="img-responsive">
	      <div class="carousel-caption">
	        <p> 4.jpg </p>
	      </div>
	    </div>

	  </div>

	  <!-- Controls -->
	  <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
	    <span class="glyphicon glyphicon-chevron-left"></span>
	  </a>
	  <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
	    <span class="glyphicon glyphicon-chevron-right"></span>
	  </a>

	  <!-- Thumbnails --> 
	  <ul class="thumbnails-carousel clearfix">
	  	<li><img src="https://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1_tn.jpg"></li>
		<li><img src="https://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="1_tn.jpg"></li>
		<li><img src="https://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="1_tn.jpg"></li>
		<li><img src="https://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="1_tn.jpg"></li>
	  </ul>
	</div>

并像这样修改它，假设我除了图像什么都没有，并且我想使用 jquery 构建其余部分

;(function(window, $, undefined) {

	var conf = {
		center: true,
		backgroundControl: false
	};

	var cache = {
		$carouselContainer: $('.thumbnails-carousel').parent(),
		$thumbnailsLi: $('.thumbnails-carousel li'),
		$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
	};

	function init() {
		cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
		cache.$thumbnailsLi.first().addClass('active-thumbnail');

		if(!conf.backgroundControl) {
			cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
		}
		else {
			cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
		}

		if(conf.center) {
			cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
		}
	}

	function refreshOpacities(domEl) {
		cache.$thumbnailsLi.removeClass('active-thumbnail');
		cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
	}	

	function bindUiActions() {
		cache.$carouselContainer.on('slide.bs.carousel', function(e) {
  			refreshOpacities(e.relatedTarget);
		});

		cache.$thumbnailsLi.click(function(){
			cache.$carouselContainer.carousel($(this).index());
		});
	}

	$.fn.thumbnailsCarousel = function(options) {
		conf = $.extend(conf, options);

		init();
		bindUiActions();

		return this;
	}

})(window, jQuery);

$('.thumbnails-carousel').thumbnailsCarousel();


// here's what i added

	$('img').wrap('<div class="img-responsive"></div>');



	$('.img-responsive').wrap('<div class="item"></div>');


	$('.item').wrapAll('<div class="carousel-inner"></div>');


	$('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');


$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');

var numItems = $('.img-responsive').length;
var counter =0;

for (i = counter; i < numItems; i++) {
	// I don't know how to continue from here
}



	$('.item:first').addClass('active srle');
body {
  padding: 10px;
  text-align: center;
}
#carousel-example-generic {
  display: inline-block;
}
/*****************************/

/* Plugin styles */
ul.thumbnails-carousel {
	padding: 5px 0 0 0;
	margin: 0;
	list-style-type: none;
	text-align: center;
}
ul.thumbnails-carousel .center {
	display: inline-block;
}
ul.thumbnails-carousel li {
	margin-right: 5px;
	float: left;
	cursor: pointer;
}
.controls-background-reset {
	background: none !important;
}
.active-thumbnail {
	opacity: 0.4;
}
.indicators-fix {
	bottom: 70px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  <img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
	      <img src="https://s29.postimg.org/xaf064313/image.jpg" >
	      <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >

正如您所看到的，我已经到了那里，我不知道要在 for 循环中放入什么才能生成缩略图和轮播指示器。我希望我没有遗漏任何东西。

最佳答案

您需要将轮播指示器添加到轮播中

(function(window, $, undefined) {

	var conf = {
		center: true,
		backgroundControl: false
	};

	var cache = {
		$carouselContainer: $('.thumbnails-carousel').parent(),
		$thumbnailsLi: $('.thumbnails-carousel li'),
		$controls: $('.thumbnails-carousel').parent().find('.carousel-control')
	};

	function init() {
		cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
		cache.$thumbnailsLi.first().addClass('active-thumbnail');

		if(!conf.backgroundControl) {
			cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
		}
		else {
			cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
		}

		if(conf.center) {
			cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
		}
	}

	function refreshOpacities(domEl) {
		cache.$thumbnailsLi.removeClass('active-thumbnail');
		cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
	}	

	function bindUiActions() {
		cache.$carouselContainer.on('slide.bs.carousel', function(e) {
  			refreshOpacities(e.relatedTarget);
		});

		cache.$thumbnailsLi.click(function(){
			cache.$carouselContainer.carousel($(this).index());
		});
	}

	$.fn.thumbnailsCarousel = function(options) {
		conf = $.extend(conf, options);

		init();
		bindUiActions();

		return this;
	}

})(window, jQuery);

$('.thumbnails-carousel').thumbnailsCarousel();


// here's what i added

	$('img').wrap('<div class="img-responsive"></div>');



	$('.img-responsive').wrap('<div class="item"></div>');


	$('.item').wrapAll('<div class="carousel-inner"></div>');


	$('.carousel-inner').wrapAll('<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false"></div>');


$('.carousel-inner').after(' <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a><a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>');

var numItems = $('.img-responsive').length;
var counter =0;

var $indicators = $('<ol/>', {
  'class': 'carousel-indicators'
}).appendTo('#carousel-example-generic');
for (i = counter; i < numItems; i++) {
  var indClass = '';
  if(i == 0) {
    indClass = 'active'
  }
	$('<li/>', {
    'data-target': '#carousel-example-generic',
    'data-slide-to': i,
    'class': indClass
  }).appendTo($indicators);
}



	$('.item:first').addClass('active srle');
body {
  padding: 10px;
  text-align: center;
}
#carousel-example-generic {
  display: inline-block;
}
/*****************************/

/* Plugin styles */
ul.thumbnails-carousel {
	padding: 5px 0 0 0;
	margin: 0;
	list-style-type: none;
	text-align: center;
}
ul.thumbnails-carousel .center {
	display: inline-block;
}
ul.thumbnails-carousel li {
	margin-right: 5px;
	float: left;
	cursor: pointer;
}
.controls-background-reset {
	background: none !important;
}
.active-thumbnail {
	opacity: 0.4;
}
.indicators-fix {
	bottom: 70px;
}
<meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    
  <img src="https://s28.postimg.org/4237b0cjh/image.jpg" >
	      <img src="https://s29.postimg.org/xaf064313/image.jpg" >
	      <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >

关于javascript - 如何使用jquery编写 Bootstrap 轮播元素？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45888398/

上一篇：javascript - Typescript 编译文件

下一篇：javascript - 重构破坏初始状态

相关文章：

javascript - MVC RAZOR jQuery Ajax 不在 IE 中执行 javascript

javascript - 如何在 React 中读取 DOM

javascript - jQuery DropDown 文本/值显示在下一个输入中

jquery - 轻松更改背景图片 onclick

php - 许多WordPress主题中奇怪的虚假social.png的目的是什么

php - 检查产品类别是否为顶级或没有子类别

php - 如何获取URL以发布作者的用户BuddyPress Avatar在Wordpress发布循环中

javascript 日期问题 - 0 变成 1？

javascript - 在 Wordpress 上添加平滑滚动条 JavaScript

php - 使用 PHP 和 AJAX 请求的简单 MySQL 登录

©2024 IT工具网  联系我们