0

Имеется следующий код :

(function ($){
		jQuery.fn.quoteTabs = function(options){

			var createTabs = function(){
				tabs = this;
				i = 0;

				showPage = function (i){
					$(tabs).children('div').children('div').hide();
					$(tabs).children('div').children('div').eq(i).show();
					$(tabs).children('ul').children('li').removeClass('active');
					$(tabs).children('ul').children('li').eq(i).addClass('active');
				}

				showPage(0);

				$(tabs).children('ul').children('li').each(function (index, element){
					$(element).attr("data-page", i);
					i++;
				});

				$(tabs).children('ul').children('li').on('click', function(){
					showPage(parseInt($(this).attr('data-page')));
				});
			};
			return this.each(createTabs);
		};
	})(jQuery);

	$('.quotes').quoteTabs();
	
	
	$('.qoute-trash-button.next').on('click', function(){
        var currentAuthor = $('.quote-author.current'),
         	currentAuthorIndex = $('.quote-author.current').index(),
		 	nextAuthorIndex = currentAuthorIndex + 1,
		 	nextAuthor = $('.quote-author').eq(nextAuthorIndex);
        currentAuthor.fadeOut(0);
        currentAuthor.removeClass('current');

        if(nextAuthorIndex == ($('.quote-author:last').index()+1)){
            $('.quote-author').eq(0).fadeIn(1000);
            $('.quote-author').eq(0).addClass('current');
        } else {
            nextAuthor.fadeIn(1000);
            nextAuthor.addClass('current');
        }
    });

    $('.qoute-trash-button.prev').on('click', function(){
        var currentAuthor = $('.quote-author.current'),
            currentAuthorIndex = $('.quote-author.current').index(),
            prevAuthorIndex = currentAuthorIndex - 1,
            prevAuthor = $('.quote-author').eq(prevAuthorIndex);
        
        currentAuthor.fadeOut(0);
        currentAuthor.removeClass('current');
        prevAuthor.fadeIn(1000);
        prevAuthor.addClass('current');
    })
.quotes {
  padding: 0 10px;
  width: 100%;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  display: flex;
}
.quotes .tab-buttons {
  position: absolute;
  right: -35px;
  top: 24%;
}
.quotes .tab-buttons li {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  background: transparent;
  border: 2px solid #e4e4e4;
  border-radius: 50%;
  margin-bottom: 5px;
}
.quotes .tab-buttons li.active {
  border: 2px solid;
}
.quotes .tab-buttons li.active span {
  width: 64%;
  height: 64%;
  border-radius: 50%;
}
.quotes .quotes-tabs .quote {
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 37px 150px 64px 62px;
  background: white;
  min-height: 130px;
  display: flex;
  flex-flow: row nowrap;
}
.quotes .quotes-tabs .quote .quote-content {
  background: inherit;
  height: auto;
  border-left: 2px solid #e4e4e4;
  margin-left: 30px;
  align-self: center;
}
.quotes .quotes-tabs .quote .quote-content .quote-text {
  position: relative;
  display: block;
  background: inherit;
  margin-bottom: 2em;
  margin-left: 20px;
}
.quotes .quotes-tabs .quote .quote-content .quote-text::before, .quotes .quotes-tabs .quote .quote-content .quote-text::after {
  content: '\f10e';
  display: block;
  position: absolute;
  text-align: center;
  background: inherit;
  font-size: 16px;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
}
.quotes .quotes-tabs .quote .quote-content .quote-text::before {
  top: 0px;
  left: -34px;
  height: 39px;
  min-height: 90%;
}
.quotes .quotes-tabs .quote .quote-content .quote-text::after {
  top: 100%;
  left: 100%;
}
.quotes .quotes-tabs .quote .quote-content .quote-signatur {
  margin-left: 20px;
}
.quotes .quotes-tabs .quote .quote-content .quote-signatur .quote-signature-name {
  font-size: 16px;
}
.quotes .quotes-tabs .quote .qoute-photo {
  align-self: center;
  width: 130px;
  border-radius: 50%;
  border: 2px solid #e4e4e4;
  padding: 8px;
  background: inherit;
}
.quotes .quotes-tabs .quote .quote-trash {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  top: 100%;
  margin: -35px 48px 0 182px;
}
.quotes .quotes-tabs .quote .quote-trash .quote-author {
  display: none;
}
.quotes .quotes-tabs .quote .quote-trash .quote-author.current {
  display: block;
}
.quotes .quotes-tabs .quote .quote-trash .quote-author .qoute-trash-photo {
  width: 64px;
  height: 64px;
  border-radius: 64px;
  border: 1px solid #e4e4e4;
  padding: 2px;
}
.quotes .quotes-tabs .quote .quote-trash .quote-author .quote-trash-signature-name {
  margin-bottom: 5px;
}
.quotes .quotes-tabs .quote .quote-trash .quote-author .quote-trash-signature-post {
  font-size: 12px;
}
.quotes .quotes-tabs .quote .quote-trash .qoute-trash-button {
  background: white;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}
.quotes .quotes-tabs .quote .quote-trash .qoute-trash-button, .quotes .quotes-tabs .quote .quote-trash .qoute-trash-photo, .quotes .quotes-tabs .quote .quote-trash .qoute-trash-signature {
  margin: 0 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quotes" id="quotes">
				
				<ul class="tab-buttons">
					<li class="dots"><span></span></li>
					<li class="dots"><span></span></li>
					<li class="dots"><span></span></li>
					<li class="dots"><span></span></li>
					<li class="dots"><span></span></li>
				</ul> <!-- //tab-buttons -->

			<div class="quotes-tabs">

			  <div class="quote">
				  
			    <img class="qoute-photo" src="assets/images/tabimage.png" alt="" />
			    
			    <div class="quote-content">
				    
			      <blockquote  class="quote-text">
			        <cite>Some text. Many many text. Man man many text.
						Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
						Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
						Many many text. Many many text. Mny nany tny text.</cite>
			      </blockquote>
			      
			      <div class="quote-signatur">
			        <div class="quote-signature-post">Trainer:</div>  
			        <div class="quote-signature-name">Laura Harad</div>
				  </div>
				  
			    </div> <!-- //quote-content -->
			    
			    <div class="quote-trash">
			      <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>
			      
				  	<div class="quote-author current">
						<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
						<div class="qoute-trash-signature">
							<div class="quote-trash-signature-name">Sara Taylor</div>  
							<div class="quote-trash-signature-post">Trainer</div>
						</div>
				  	</div>

					<div class="quote-author">
						<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
						<div class="qoute-trash-signature">
							<div class="quote-trash-signature-name">Sara Taylor</div>  
							<div class="quote-trash-signature-post">Trainer</div>
						</div>
					</div>

					<div class="quote-author">
						<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
						<div class="qoute-trash-signature">
							<div class="quote-trash-signature-name">Sara Taylor</div>  
							<div class="quote-trash-signature-post">Trainer</div>
						</div>
					</div>

			      <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
			    </div><!-- //quote-trash -->
			    
			  </div> <!-- //quote -->

			  <div class="quote">
				  
					<img class="qoute-photo" src="assets/images/tabimage.png" alt="" />
					
					<div class="quote-content">
						
					  <blockquote  class="quote-text">
						<cite>Some text. Many many text. Man man many text.
							Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
							Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
							Many many text. Many many text. Mny nany tny text.</cite>
					  </blockquote>
					  
					  <div class="quote-signatur">
						<div class="quote-signature-post">Trainer:</div>  
						<div class="quote-signature-name">Laura Harad</div>
					  </div>
					  
					</div> <!-- //quote-content -->
					
					<div class="quote-trash">
					  <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>
					 
					  <div class="quote-author current">
							<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
							<div class="qoute-trash-signature">
								<div class="quote-trash-signature-name">Sara Taylor</div>  
								<div class="quote-trash-signature-post">Trainer</div>
							</div>
							</div>

							<div class="quote-author">
							<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
							<div class="qoute-trash-signature">
								<div class="quote-trash-signature-name">Sara Taylor</div>  
								<div class="quote-trash-signature-post">Trainer</div>
							</div>
							</div>

							<div class="quote-author">
							<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
							<div class="qoute-trash-signature">
								<div class="quote-trash-signature-name">Sara Taylor</div>  
								<div class="quote-trash-signature-post">Trainer</div>
							</div>
							</div>

					  <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
					</div><!-- //quote-trash -->
					
				  </div> <!-- //quote -->

				  <div class="quote">
				  
						<img class="qoute-photo" src="assets/images/tabimage.png" alt="" />
						
						<div class="quote-content">
							
						  <blockquote  class="quote-text">
							<cite>Some text. Many many text. Man man many text.
								Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
								Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
								Many many text. Many many text. Mny nany tny text.</cite>
						  </blockquote>
						  
						  <div class="quote-signatur">
							<div class="quote-signature-post">Trainer:</div>  
							<div class="quote-signature-name">Laura Harad</div>
						  </div>
						  
						</div> <!-- //quote-content -->
						
						<div class="quote-trash">
						  <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>
						  
						  <div class="quote-author current">
								<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
								<div class="qoute-trash-signature">
									<div class="quote-trash-signature-name">Sara Taylor</div>  
									<div class="quote-trash-signature-post">Trainer</div>
								</div>
								</div>

								<div class="quote-author">
								<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
								<div class="qoute-trash-signature">
									<div class="quote-trash-signature-name">Sara Taylor</div>  
									<div class="quote-trash-signature-post">Trainer</div>
								</div>
								</div>

								<div class="quote-author">
								<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
								<div class="qoute-trash-signature">
									<div class="quote-trash-signature-name">Sara Taylor</div>  
									<div class="quote-trash-signature-post">Trainer</div>
								</div>
								</div>

						  <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
						</div><!-- //quote-trash -->
						
					  </div> <!-- //quote -->

					  <div class="quote">
				  
							<img class="qoute-photo" src="assets/images/tabimage.png" alt="" />
							
							<div class="quote-content">
								
							  <blockquote  class="quote-text">
								<cite>Some text. Many many text. Man man many text.
									Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
									Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
									Many many text. Many many text. Mny nany tny text.</cite>
							  </blockquote>
							  
							  <div class="quote-signatur">
								<div class="quote-signature-post">Trainer:</div>  
								<div class="quote-signature-name">Laura Harad</div>
							  </div>
							  
							</div> <!-- //quote-content -->
							
							<div class="quote-trash">
							  <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>

							<div class="quote-author current">
								<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
								<div class="qoute-trash-signature">
									<div class="quote-trash-signature-name">Sara Taylor</div>  
									<div class="quote-trash-signature-post">Trainer</div>
								</div>
							</div>

							<div class="quote-author">
								<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
								<div class="qoute-trash-signature">
									<div class="quote-trash-signature-name">Sara Taylor</div>  
									<div class="quote-trash-signature-post">Trainer</div>
								</div>
							</div>

							<div class="quote-author">
								<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
								<div class="qoute-trash-signature">
									<div class="quote-trash-signature-name">Sara Taylor</div>  
									<div class="quote-trash-signature-post">Trainer</div>
								</div>
							</div>

							  <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
							</div><!-- //quote-trash -->
							
						  </div> <!-- //quote -->

						  <div class="quote">
				  
								<img class="qoute-photo" src="assets/images/tabimage.png" alt="" />
								
								<div class="quote-content">
									
								  <blockquote  class="quote-text">
									<cite>Some text. Many many text. Man man many text.
										Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
										Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
										Many many text. Many many text. Mny nany tny text.</cite>
								  </blockquote>
								  
								  <div class="quote-signatur">
									<div class="quote-signature-post">Trainer:</div>  
									<div class="quote-signature-name">Laura Harad</div>
								  </div>
								  
								</div> <!-- //quote-content -->
								
								<div class="quote-trash">
								  <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>

								  <div class="quote-author current">
									<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
									<div class="qoute-trash-signature">
										<div class="quote-trash-signature-name">Sara Taylor</div>  
										<div class="quote-trash-signature-post">Trainer</div>
									</div>
								  </div>

								  <div class="quote-author">
									<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
									<div class="qoute-trash-signature">
										<div class="quote-trash-signature-name">Sara Taylor</div>  
										<div class="quote-trash-signature-post">Trainer</div>
									</div>
								  </div>

								  <div class="quote-author">
									<img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
									<div class="qoute-trash-signature">
										<div class="quote-trash-signature-name">Sara Taylor</div>  
										<div class="quote-trash-signature-post">Trainer</div>
									</div>
								  </div>
								  
								  <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
								</div><!-- //quote-trash -->
								
							  </div> <!-- //quote -->

				</div>
			  
			</div> <!-- //quotes -->

Данный код подразумевает 2 части : 1-я часть - Табы 2 -я часть слайдер внутри каждого таба.

Проблема заключается в том, что данный код работает только внутри 1-го таба. В остальных же, класс current удаляется из каждого автора и никаким образом не вызывается. Прошу помощи!

4
  • К сожалению, кусок кода потерялся, поэтому пример нерабочий. Тем не менее. Все выборки с .quote-author надо изменить, чтобы они делались только внутри текущего таба.
    – user176262
    9 дек 2018 в 23:32
  • @Igor поправил, 2 скобки удалились 9 дек 2018 в 23:36
  • добавьте тогда уж и html
    – user176262
    9 дек 2018 в 23:38
  • @Igor картинки и иконки не отобразятся но я думаю это не проблема 9 дек 2018 в 23:49

1 ответ 1

1

Все выборки с .quote-author надо изменить, чтобы они делались только внутри текущего таба.

Там еще какие-то проблемы с проскакиванием через автора, пока не разбирался.

(function($) {
  jQuery.fn.quoteTabs = function(options) {

    var createTabs = function() {
      tabs = this;
      i = 0;

      showPage = function(i) {
        $(tabs).children('div').children('div').hide();
        $(tabs).children('div').children('div').eq(i).show();
        $(tabs).children('ul').children('li').removeClass('active');
        $(tabs).children('ul').children('li').eq(i).addClass('active');
      }

      showPage(0);

      $(tabs).children('ul').children('li').each(function(index, element) {
        $(element).attr("data-page", i);
        i++;
      });

      $(tabs).children('ul').children('li').on('click', function() {
        showPage(parseInt($(this).attr('data-page')));
      });
    };
    return this.each(createTabs);
  };
})(jQuery);

$('.quotes').quoteTabs();


$('.qoute-trash-button.next').on('click', function() {
  var $quote = $(this).closest(".quote");
  var currentAuthor = $quote.find('.quote-author.current'),
    currentAuthorIndex = $quote.find('.quote-author.current').index(),
    nextAuthorIndex = currentAuthorIndex + 1,
    nextAuthor = $quote.find('.quote-author').eq(nextAuthorIndex);
  currentAuthor.fadeOut(0);
  currentAuthor.removeClass('current');

  if (nextAuthorIndex == ($quote.find('.quote-author:last').index() + 1)) {
    $quote.find('.quote-author').eq(0).fadeIn(1000);
    $quote.find('.quote-author').eq(0).addClass('current');
  } else {
    nextAuthor.fadeIn(1000);
    nextAuthor.addClass('current');
  }
});

$('.qoute-trash-button.prev').on('click', function() {
  var $quote = $(this).closest(".quote");
  var currentAuthor = $quote.find('.quote-author.current'),
    currentAuthorIndex = $quote.find('.quote-author.current').index(),
    prevAuthorIndex = currentAuthorIndex - 1,
    prevAuthor = $quote.find('.quote-author').eq(prevAuthorIndex);

  currentAuthor.fadeOut(0);
  currentAuthor.removeClass('current');
  prevAuthor.fadeIn(1000);
  prevAuthor.addClass('current');
})
.quotes {
  padding: 0 10px;
  width: 100%;
  font-size: 14px;
  position: relative;
  box-sizing: border-box;
  display: flex;
}

.quotes .tab-buttons {
  position: absolute;
  right: -35px;
  top: 24%;
}

.quotes .tab-buttons li {
  cursor: pointer;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 21px;
  height: 21px;
  background: transparent;
  border: 2px solid #e4e4e4;
  border-radius: 50%;
  margin-bottom: 5px;
}

.quotes .tab-buttons li.active {
  border: 2px solid;
}

.quotes .tab-buttons li.active span {
  width: 64%;
  height: 64%;
  border-radius: 50%;
}

.quotes .quotes-tabs .quote {
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
  border-radius: 4px;
  padding: 37px 150px 64px 62px;
  background: white;
  min-height: 130px;
  display: flex;
  flex-flow: row nowrap;
}

.quotes .quotes-tabs .quote .quote-content {
  background: inherit;
  height: auto;
  border-left: 2px solid #e4e4e4;
  margin-left: 30px;
  align-self: center;
}

.quotes .quotes-tabs .quote .quote-content .quote-text {
  position: relative;
  display: block;
  background: inherit;
  margin-bottom: 2em;
  margin-left: 20px;
}

.quotes .quotes-tabs .quote .quote-content .quote-text::before,
.quotes .quotes-tabs .quote .quote-content .quote-text::after {
  content: '\f10e';
  display: block;
  position: absolute;
  text-align: center;
  background: inherit;
  font-size: 16px;
  font-weight: 900;
  font-family: 'Font Awesome 5 Free';
}

.quotes .quotes-tabs .quote .quote-content .quote-text::before {
  top: 0px;
  left: -34px;
  height: 39px;
  min-height: 90%;
}

.quotes .quotes-tabs .quote .quote-content .quote-text::after {
  top: 100%;
  left: 100%;
}

.quotes .quotes-tabs .quote .quote-content .quote-signatur {
  margin-left: 20px;
}

.quotes .quotes-tabs .quote .quote-content .quote-signatur .quote-signature-name {
  font-size: 16px;
}

.quotes .quotes-tabs .quote .qoute-photo {
  align-self: center;
  width: 130px;
  border-radius: 50%;
  border: 2px solid #e4e4e4;
  padding: 8px;
  background: inherit;
}

.quotes .quotes-tabs .quote .quote-trash {
  position: absolute;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  top: 100%;
  margin: -35px 48px 0 182px;
}

.quotes .quotes-tabs .quote .quote-trash .quote-author {
  display: none;
}

.quotes .quotes-tabs .quote .quote-trash .quote-author.current {
  display: block;
}

.quotes .quotes-tabs .quote .quote-trash .quote-author .qoute-trash-photo {
  width: 64px;
  height: 64px;
  border-radius: 64px;
  border: 1px solid #e4e4e4;
  padding: 2px;
}

.quotes .quotes-tabs .quote .quote-trash .quote-author .quote-trash-signature-name {
  margin-bottom: 5px;
}

.quotes .quotes-tabs .quote .quote-trash .quote-author .quote-trash-signature-post {
  font-size: 12px;
}

.quotes .quotes-tabs .quote .quote-trash .qoute-trash-button {
  background: white;
  width: 32px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 32px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.16);
  cursor: pointer;
}

.quotes .quotes-tabs .quote .quote-trash .qoute-trash-button,
.quotes .quotes-tabs .quote .quote-trash .qoute-trash-photo,
.quotes .quotes-tabs .quote .quote-trash .qoute-trash-signature {
  margin: 0 12px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="quotes" id="quotes">

  <ul class="tab-buttons">
    <li class="dots"><span>A</span></li>
    <li class="dots"><span>B</span></li>
    <li class="dots"><span>C</span></li>
    <li class="dots"><span>D</span></li>
    <li class="dots"><span>E</span></li>
  </ul>
  <!-- //tab-buttons -->

  <div class="quotes-tabs">

    <div class="quote">

      <img class="qoute-photo" src="assets/images/tabimage.png" alt="" />

      <div class="quote-content">

        <blockquote class="quote-text">
          <cite>One Some text. Many many text. Man man many text.
						Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
						Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
						Many many text. Many many text. Mny nany tny text.</cite>
        </blockquote>

        <div class="quote-signatur">
          <div class="quote-signature-post">Trainer:</div>
          <div class="quote-signature-name">111 Laura Harad</div>
        </div>

      </div>
      <!-- //quote-content -->

      <div class="quote-trash">
        <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>

        <div class="quote-author current">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">111 Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">222 Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">333 Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
      </div>
      <!-- //quote-trash -->

    </div>
    <!-- //quote -->

    <div class="quote">

      <img class="qoute-photo" src="assets/images/tabimage.png" alt="" />

      <div class="quote-content">

        <blockquote class="quote-text">
          <cite>Two Some text. Many many text. Man man many text.
							Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
							Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
							Many many text. Many many text. Mny nany tny text.</cite>
        </blockquote>

        <div class="quote-signatur">
          <div class="quote-signature-post">Trainer:</div>
          <div class="quote-signature-name">222 111 Laura Harad</div>
        </div>

      </div>
      <!-- //quote-content -->

      <div class="quote-trash">
        <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>

        <div class="quote-author current">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">555 Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">666 Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">777 Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
      </div>
      <!-- //quote-trash -->

    </div>
    <!-- //quote -->

    <div class="quote">

      <img class="qoute-photo" src="assets/images/tabimage.png" alt="" />

      <div class="quote-content">

        <blockquote class="quote-text">
          <cite>Three Some text. Many many text. Man man many text.
								Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
								Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
								Many many text. Many many text. Mny nany tny text.</cite>
        </blockquote>

        <div class="quote-signatur">
          <div class="quote-signature-post">Trainer:</div>
          <div class="quote-signature-name">333 Laura Harad</div>
        </div>

      </div>
      <!-- //quote-content -->

      <div class="quote-trash">
        <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>

        <div class="quote-author current">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">AAA Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">SSS Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">DDD Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
      </div>
      <!-- //quote-trash -->

    </div>
    <!-- //quote -->

    <div class="quote">

      <img class="qoute-photo" src="assets/images/tabimage.png" alt="" />

      <div class="quote-content">

        <blockquote class="quote-text">
          <cite>Four Some text. Many many text. Man man many text.
									Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
									Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
									Many many text. Many many text. Mny nany tny text.</cite>
        </blockquote>

        <div class="quote-signatur">
          <div class="quote-signature-post">Trainer:</div>
          <div class="quote-signature-name">Laura Harad</div>
        </div>

      </div>
      <!-- //quote-content -->

      <div class="quote-trash">
        <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>

        <div class="quote-author current">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
      </div>
      <!-- //quote-trash -->

    </div>
    <!-- //quote -->

    <div class="quote">

      <img class="qoute-photo" src="assets/images/tabimage.png" alt="" />

      <div class="quote-content">

        <blockquote class="quote-text">
          <cite>Five Some text. Many many text. Man man many text.
										Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
										Many many text. Many many text. Mny nany tny text.Some text. Many many text. Man man many text.
										Many many text. Many many text. Mny nany tny text.</cite>
        </blockquote>

        <div class="quote-signatur">
          <div class="quote-signature-post">Trainer:</div>
          <div class="quote-signature-name">Laura Harad</div>
        </div>

      </div>
      <!-- //quote-content -->

      <div class="quote-trash">
        <div class="qoute-trash-button prev"><i class="fas fa-chevron-left prev"></i></div>

        <div class="quote-author current">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="quote-author">
          <img class="qoute-trash-photo" src="assets/images/Layer%2012%20copy.png" alt="" />
          <div class="qoute-trash-signature">
            <div class="quote-trash-signature-name">Sara Taylor</div>
            <div class="quote-trash-signature-post">Trainer</div>
          </div>
        </div>

        <div class="qoute-trash-button next"><i class="fas fa-chevron-right next"></i></div>
      </div>
      <!-- //quote-trash -->

    </div>
    <!-- //quote -->

  </div>

</div>
<!-- //quotes -->

2
  • Спасибо! И снова этот метод .closest() ( 10 дек 2018 в 0:11
  • @ПавелИгоревич Да. Удобная функция для ограничения действий только элементами под каким-то родителем this.
    – user176262
    10 дек 2018 в 0:13

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.