0
This is the site. Sie müssen die Seite nicht besuchen, alles wird hier geschrieben. Es ist Wordpress mit einem alten Wordpress-Theme, das ich nicht ändern kann, um die Bilder wie eine Diashow mit Thumbnails aussehen zu lassen. Ich könnte auf Kopf- und Fußzeile zugreifen, um das CSS und das Javascript zu schreiben, aber es ist so schwer zu finden, welche Funktion die Bilder widerspiegelt und die Klassen von Hand schreibt. Ich kann die Klassen bearbeiten jquery mitWie schreibt man Bootstrap-Karussell-Elemente mit jquery?
So nahm ich dieses Beispiel
// thumbnails.carousel.js jQuery plugin
;(function(window, $, undefined) {
\t var conf = {
\t \t center: true,
\t \t backgroundControl: false
\t };
\t var cache = {
\t \t $carouselContainer: $('.thumbnails-carousel').parent(),
\t \t $thumbnailsLi: $('.thumbnails-carousel li'),
\t \t $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
\t };
\t function init() {
\t \t cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
\t \t cache.$thumbnailsLi.first().addClass('active-thumbnail');
\t \t if(!conf.backgroundControl) {
\t \t \t cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
\t \t }
\t \t else {
\t \t \t cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
\t \t }
\t \t if(conf.center) {
\t \t \t cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
\t \t }
\t }
\t function refreshOpacities(domEl) {
\t \t cache.$thumbnailsLi.removeClass('active-thumbnail');
\t \t cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
\t } \t
\t function bindUiActions() {
\t \t cache.$carouselContainer.on('slide.bs.carousel', function(e) {
\t \t \t refreshOpacities(e.relatedTarget);
\t \t });
\t \t cache.$thumbnailsLi.click(function(){
\t \t \t cache.$carouselContainer.carousel($(this).index());
\t \t });
\t }
\t $.fn.thumbnailsCarousel = function(options) {
\t \t conf = $.extend(conf, options);
\t \t init();
\t \t bindUiActions();
\t \t return this;
\t }
})(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 {
\t padding: 5px 0 0 0;
\t margin: 0;
\t list-style-type: none;
\t text-align: center;
}
ul.thumbnails-carousel .center {
\t display: inline-block;
}
ul.thumbnails-carousel li {
\t margin-right: 5px;
\t float: left;
\t cursor: pointer;
}
.controls-background-reset {
\t background: none !important;
}
.active-thumbnail {
\t opacity: 0.4;
}
.indicators-fix {
\t 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 -->
\t <div id="carousel-example-generic" class="carousel slide" data-ride="carousel" data-interval="false">
\t <!-- Indicators -->
\t <ol class="carousel-indicators">
\t <li data-target="#carousel-example-generic" data-slide-to="0" class="active"></li>
\t <li data-target="#carousel-example-generic" data-slide-to="1"></li>
\t <li data-target="#carousel-example-generic" data-slide-to="2"></li>
\t <li data-target="#carousel-example-generic" data-slide-to="3"></li>
\t </ol>
\t <!-- Wrapper for slides -->
\t <div class="carousel-inner">
\t <div class="item active srle">
\t <img src="https://s28.postimg.org/4237b0cjh/image.jpg" alt="1.jpg" class="img-responsive">
\t <div class="carousel-caption">
\t <p> 1.jpg </p>
\t </div>
\t </div>
\t <div class="item">
\t <img src="https://s29.postimg.org/xaf064313/image.jpg" alt="2.jpg" class="img-responsive">
\t <div class="carousel-caption">
\t <p> 2.jpg </p>
\t </div>
\t </div>
\t <div class="item">
\t <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" alt="3.jpg" class="img-responsive">
\t <div class="carousel-caption">
\t <p> 3.jpg </p>
\t </div>
\t </div>
\t <div class="item">
\t <img src="https://s7.postimg.org/4z602gd8b/image.jpg" alt="4.jpg" class="img-responsive">
\t <div class="carousel-caption">
\t <p> 4.jpg </p>
\t </div>
\t </div>
\t </div>
\t <!-- Controls -->
\t <a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
\t <span class="glyphicon glyphicon-chevron-left"></span>
\t </a>
\t <a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
\t <span class="glyphicon glyphicon-chevron-right"></span>
\t </a>
\t <!-- Thumbnails -->
\t <ul class="thumbnails-carousel clearfix">
\t \t <li><img src="https://s2.postimg.org/h6uti3zud/1_tn.jpg" alt="1_tn.jpg"></li>
\t \t <li><img src="https://s27.postimg.org/n4fjr7q2n/2_tn.jpg" alt="1_tn.jpg"></li>
\t \t <li><img src="https://s29.postimg.org/afuhmf61f/3_tn.jpg" alt="1_tn.jpg"></li>
\t \t <li><img src="https://s29.postimg.org/p45dxi6hf/4_tn.jpg" alt="1_tn.jpg"></li>
\t </ul>
\t </div>Und es wie so verändert, sondern Bilder, die ich habe nichts davon aus, und ich will den Rest bauen jquery mit
;(function(window, $, undefined) {
\t var conf = {
\t \t center: true,
\t \t backgroundControl: false
\t };
\t var cache = {
\t \t $carouselContainer: $('.thumbnails-carousel').parent(),
\t \t $thumbnailsLi: $('.thumbnails-carousel li'),
\t \t $controls: $('.thumbnails-carousel').parent().find('.carousel-control')
\t };
\t function init() {
\t \t cache.$carouselContainer.find('ol.carousel-indicators').addClass('indicators-fix');
\t \t cache.$thumbnailsLi.first().addClass('active-thumbnail');
\t \t if(!conf.backgroundControl) {
\t \t \t cache.$carouselContainer.find('.carousel-control').addClass('controls-background-reset');
\t \t }
\t \t else {
\t \t \t cache.$controls.height(cache.$carouselContainer.find('.carousel-inner').height());
\t \t }
\t \t if(conf.center) {
\t \t \t cache.$thumbnailsLi.wrapAll("<div class='center clearfix'></div>");
\t \t }
\t }
\t function refreshOpacities(domEl) {
\t \t cache.$thumbnailsLi.removeClass('active-thumbnail');
\t \t cache.$thumbnailsLi.eq($(domEl).index()).addClass('active-thumbnail');
\t } \t
\t function bindUiActions() {
\t \t cache.$carouselContainer.on('slide.bs.carousel', function(e) {
\t \t \t refreshOpacities(e.relatedTarget);
\t \t });
\t \t cache.$thumbnailsLi.click(function(){
\t \t \t cache.$carouselContainer.carousel($(this).index());
\t \t });
\t }
\t $.fn.thumbnailsCarousel = function(options) {
\t \t conf = $.extend(conf, options);
\t \t init();
\t \t bindUiActions();
\t \t return this;
\t }
})(window, jQuery);
$('.thumbnails-carousel').thumbnailsCarousel();
// here's what i added
\t $('img').wrap('<div class="img-responsive"></div>');
\t $('.img-responsive').wrap('<div class="item"></div>');
\t $('.item').wrapAll('<div class="carousel-inner"></div>');
\t $('.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++) {
\t // I don't know how to continue from here
}
\t $('.item:first').addClass('active srle');body {
padding: 10px;
text-align: center;
}
#carousel-example-generic {
display: inline-block;
}
/*****************************/
/* Plugin styles */
ul.thumbnails-carousel {
\t padding: 5px 0 0 0;
\t margin: 0;
\t list-style-type: none;
\t text-align: center;
}
ul.thumbnails-carousel .center {
\t display: inline-block;
}
ul.thumbnails-carousel li {
\t margin-right: 5px;
\t float: left;
\t cursor: pointer;
}
.controls-background-reset {
\t background: none !important;
}
.active-thumbnail {
\t opacity: 0.4;
}
.indicators-fix {
\t 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" >
\t <img src="https://s29.postimg.org/xaf064313/image.jpg" >
\t <img src="https://s17.postimg.org/sv1x15jlb/image.jpg" >Wie Sie sehen, komme ich dorthin, ich weiß nicht, was ich in die for-Schleife legen soll, um die Thumbnails und die Karussell-Indikatoren zu erzeugen. Ich hoffe, ich vermisse nichts.
könnten Sie bitte Thumbnails hinzufügen :) – Lynob
Bitte folgen Sie diesem Beispiel hier https://codepen.io/srkimir/pen/mGbrf und benutze die gleiche Weise wie ich die Elemente angefügt habe. –