Вход

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

fenix_63
03.10.2016, 16:17
Всем привет народ!

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

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

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

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

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

Помогите пожалуйста.
fenix_63
03.10.2016, 16:19
Вот тут пример как выбрать элемент, который обладает двумя или более классами одновременно: 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 класс?
ksa
03.10.2016, 16:24
как мне с помощью jQuery выбрать только элементы с классом .slide ?
Так

var obj=$('.slide');
Pavel M.
03.10.2016, 17:47
Именно только с одним классом, не с двумя.
можно так

<!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>
fenix_63
05.10.2016, 20:40
оо, спасибо, буду тестировать
Pavel M.
06.10.2016, 13:02
можно и так
$('.xxx:not(.yyy)')
вариантов думаю много
fenix_63
07.10.2016, 22:25
Да, это действительно работает, спасибо.
А может кто-нибудь знает, как сделать, чтобы центральный элемент слайдера был увеличенным? Фотка, шрифты. Стили то прописать я смогу, а вот с 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/

В идеале слайдер вот так должен выглядеть: https://fotki.yandex.ru/next/users/tltfenix/album/74102/view/999381

Помогите пожалуйста, кто знает.
рони
07.10.2016, 22:59
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>
рони
07.10.2016, 23:00
В разделе head у меня вот это пока:
убрать
fenix_63
08.10.2016, 19:09
работает, но увеличивается постоянно только один элемент, остальные - без изменения: http://youran88.hol.es
рони
08.10.2016, 19:31
но увеличивается постоянно только один элемент, остальные - без изменения:
не судьба значит ... http://embed.plnkr.co/WfChVGgdX1fXkgdSLyBh/
fenix_63
08.10.2016, 22:49
рони У тебя в твоём примере идеально работает, понял, буду разбираться, спасибо большое!
рони
08.10.2016, 23:21
fenix_63,
уберите скрипт пост 9 и 7
fenix_63
08.10.2016, 23:42
Всё, разобрался, не работало из-за того, что стили не в раздел head выносил, а добавлял к уже существующему файлу styles.css Как только стили вынес в раздел head всё заработало.

рони Ещё раз огромное спасибо !!!
рони
08.10.2016, 23:58
fenix_63,
в html центральному слайду поставьте изначально класс big
<div class="slide big"> и можно так попробовать
$(document).ready(function(){
$('.slider4').bxSlider({
pager:false,
slideWidth: 215,
minSlides: 2,
maxSlides: 3,
moveSlides: 1,
slideMargin: 10,
onSlideBefore : function($slideElement, oldIndex, newIndex){
$(".slider4 .slide").removeClass("big")
},
onSlideAfter : function($slideElement, oldIndex, newIndex){
$(".slider4 .slide").eq(4+newIndex).addClass("big")
}

})
})