Хотя у вас есть slideToShow: 1
, я думаю, что ваша настоящая проблема - это встроенный width
, который вы помещаете в свои .service
div.
Что вам нужно сделать, это оставить эти divs в одиночку и обернуть внутреннее содержимое слайдов с div, который устанавливает ширину.
Итак, это:
<div class="service" style="width: 250px">
<span class="service_title">Teste 3</span>
<p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
</div>
Стало бы следующим:
<div class="service">
<div style="width: 250px">
<span class="service_title">Teste 3</span>
<p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada libero a scelerisque feugiat."</p>
</div>
</div>
$(document).ready(function() {
$('.services_slider').slick({
dots: true,
infinite: true,
speed: 300,
slidesToShow: 1,
centerMode: true,
variableWidth: true
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css" rel="stylesheet" />
<div class="services_slider">
<div class="service">
<div style="width: 150px">
<span class="service_title">Financiamento</span>
<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eu efficitur arcu, sit amet vestibulum libero. Vivamus ac ligula eros. Pellentesque fermentum diam ac mi elementum sollicitudin. Quisque tempus porta nibh. Mauris vel lectus est.
In tristique, quam commodo dignissim congue, est nisl auctor eros, id auctor odio neque vel risus."</p>
</div>
</div>
<div class="service">
<div style="width: 250px">
<span class="service_title">Oficina</span>
<p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
libero a scelerisque feugiat."</p>
</div>
</div>
<div class="service">
<div style="width: 300px">
<span class="service_title">Venda de veículos</span>
<p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
libero a scelerisque feugiat."</p>
</div>
</div>
<div class="service">
<div style="width: 400px">
<span class="service_title">Teste 1</span>
<p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
libero a scelerisque feugiat."</p>
</div>
</div>
<div class="service">
<div style="width: 100px">
<span class="service_title">Teste 2</span>
<p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
libero a scelerisque feugiat."</p>
</div>
</div>
<div class="service">
<div style="width: 250px">
<span class="service_title">Teste 3</span>
<p>"Proin purus ex, rhoncus vitae viverra at, sollicitudin nec ipsum. Donec ac ante mollis, porta eros id, iaculis enim. Vivamus quis turpis tellus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec et fermentum neque. Suspendisse malesuada
libero a scelerisque feugiat."</p>
</div>
</div>
</div>
Попробуйте .find_next_sibling()
:
data.find('span', class_='class1').find_next_sibling()
Используйте .text
, если хотите извлечь текст из объекта NavigableString
.