Javascript-форум - Не могу правильно выбрать селектор

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Не могу правильно выбрать селектор (https://javascript.ru/forum/jquery/65198-ne-mogu-pravilno-vybrat-selektor.html)

Не могу правильно выбрать селектор

Всем привет народ!

Есть страница http://youran88.hol.es/

Там есть слайдер. Мне надо его довести до ума, а именно сделать так, чтобы центральный элемент слайдера был размером больше остальных. Картинка сама чтоб была больше, текст и кнопка тоже больше. Ну и чтоб всё корректно работало при переключении стрелок "вперёд"-"назад".

Слайдер сам - bxslider. В инете готового прям под мою задачу слайдера я не нашёл, поэтому взял этот. А центральный элемент думаю средствами jQuery уже увеличивать.

Так вот, bxslider тем элементам, которые скрыты, добавляет класс
.bx-clone Народ, как мне с помощью jQuery выбрать только элементы с классом .slide ??

Именно только с одним классом, не с двумя. А то пока получается выбрать либо все 9 элементов с классом .slide, либо только элементы с классом .bx-clone. Мне как бы надо вычеркнуть из элементов с классом .slide те элементы, которые состоят из двух классов одновременно, т.е. slide bx-clone.

Помогите пожалуйста.

Вот тут пример как выбрать элемент, который обладает двумя или более классами одновременно: http://jquery.page2page.ru/index.php5/%D0%A1%D0%B5%D0%BB%D0%B5%D0%BA%D1%82%D0%BE%D1%80_% D0%BF%D0%BE_%D0%BA%D0%BB%D0%B0%D1%81%D1%81%D1%83

А вот как найти элемент, у которого строго 1 класс?

Цитата:

Сообщение от fenix_63

как мне с помощью jQuery выбрать только элементы с классом .slide ?

Так

var obj=$('.slide');

Цитата:

Сообщение от fenix_63

Именно только с одним классом, не с двумя.

можно так

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
</head>
<body>

  <div class="xxx yyy">class: xxx yyy</div>
  <div class="xxx">class: xxx</div>
  <div class="yyy">class: yyy</div>
  
  <script>
    $('.xxx').css('color', 'red'); // выбирает два элемента
    $('.xxx').not('.yyy').css('background-color', 'green'); // выбирает один элемент
    $('[class="yyy"]').css('background-color', 'silver'); // либо так выбирает один элемент
  </script>

</body>
</html>

оо, спасибо, буду тестировать

можно и так

$('.xxx:not(.yyy)')

вариантов думаю много

Да, это действительно работает, спасибо.
А может кто-нибудь знает, как сделать, чтобы центральный элемент слайдера был увеличенным? Фотка, шрифты. Стили то прописать я смогу, а вот с jQuery-выделением нужного элемента пока не получается.

Пока выделаю видимые 3 слайда, потом 2-му (центральный) назначаю CSS-стили - ширину побольше делаю самого слайда, и ширину картинки слайда тоже больше. Но проблема в том, чтоб при клине на стрелку "Вправо" не всегда увеличивается нужный слайд. Там ещё при пролистывании текущий слайд уходит влево (например), и его обратно уменьшить надо.

В разделе head у меня вот это пока:

<script>
      $(document).ready(function(){
          $(".bx-next").click(function () {
            //alert('Нажата кнопка Вперед');
      
            var $zooming_element = $('.slide:not(.bx-clone)');
      
            //Элемент, который надо увеличить
           $target=$zooming_element[1];
           $($target).css({
               'width':'300'+'px',
               'height':'auto'
               }
           );
      
           $($target).children('img').css({
               'width':'100'+'%',
               'height':'100'+'%'
           });
      
          });
      });
      
    </script>

Всю верстку вот сюда выложил: http://youran88.hol.es/

В идеале слайдер вот так должен выглядеть:

Помогите пожалуйста, кто знает.

fenix_63,

<style type="text/css">
   .slider4  .slide {
     transform: scale(.8);
     transition: all 1.2s;
   }
   .slider4  .slide.big {
     transform: scale(1.2);
   }

    </style>
    <script>
      $(document).ready(function(){
        $('.slider4').bxSlider({
          pager:false,
          slideWidth: 215,
          minSlides: 2,
          maxSlides: 3,
          moveSlides: 1,
          slideMargin: 10,
          onSlideAfter : function($slideElement, oldIndex, newIndex){
          $(".slider4  .slide").removeClass("big").eq(4+newIndex).addClass("big")
           }
         }).find(".slide").eq(4).addClass("big");
      })
    </script>

Цитата:

Сообщение от fenix_63

В разделе head у меня вот это пока:

убрать

работает, но увеличивается постоянно только один элемент, остальные - без изменения: http://youran88.hol.es