There is a task - to make an ordinary slider, but instead of the usual navigation (in the form of points or numbers) there should be text or you can make several div in which you can write text. The site is on cms wordpress , if this functionality can be solved with the help of any plug-in, it will be excellent. I will attach a photo, so that the task would be more clear: enter image description here

1 answer 1

There are hundreds of options. For example, at the Tiny Carousel library, it will look like this:

 $(document).ready(function() { $('#slider1').tinycarousel(); var slider = $("#slider1").data("plugin_tinycarousel"); $('#gotoslide1').click(function(e) { slider.move(0); e.preventDefault(); }); $('#gotoslide2').click(function(e) { slider.move(1); e.preventDefault(); }); $('#gotoslide3').click(function(e) { slider.move(2); e.preventDefault(); }); }); 
 <link rel="stylesheet" href="http://baijs.com/tinycarousel/examples/simple/tinycarousel.css" type="text/css" media="screen" /> <style> #slider1 .viewport { width: 500px; height: 350px; } #slider1 .overview li { height: 350px; width: 500px; border: medium none; } #slider1 .overview li > img { float: left; margin: 10px 20px 0 0; } </style> <script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> <script src="http://baijs.com/tinycarousel/examples/simple/jquery.tinycarousel.js"></script> <a href="#" id="gotoslide1">Ссылка 1</a> <a href="#" id="gotoslide2">Ссылка 2</a> <a href="#" id="gotoslide3">Ссылка 3</a> <div id="slider1"> <div class="viewport"> <ul class="overview"> <li> <img src="http://baijs.com/tinycarousel/examples/simple/images/picture6.jpg" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat adipisci, debitis doloribus qui sapiente. Delectus ullam debitis, nostrum commodi quam, quas incidunt ea inventore, sapiente tempora aspernatur earum neque? Minus! Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sapiente laudantium saepe, porro quam temporibus quaerat eaque tempora soluta accusamus et? Voluptas ullam exercitationem, harum sapiente quo tempore velit atque porro? </li> <li> <img src="http://baijs.com/tinycarousel/examples/simple/images/picture5.jpg" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quibusdam neque, consectetur dicta voluptatum modi alias assumenda reiciendis at iure error accusantium, veritatis placeat laudantium quos, porro. Illum consectetur tempora totam. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quasi animi magni accusantium architecto possimus vitae sequi, blanditiis eveniet in. Voluptatum numquam fuga asperiores nam nesciunt nisi, doloribus quasi quos aspernatur.</li> <li> <img src="http://baijs.com/tinycarousel/examples/simple/images/picture4.jpg" />Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequatur est dolorem reprehenderit deserunt quae nulla officia eos voluptate molestiae. Fugit temporibus dolore quidem sint perspiciatis architecto magnam quae ipsum delectus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestias, temporibus, ex! Nesciunt ut harum facilis ex quo asperiores unde deserunt doloribus esse aliquid ea, qui cumque numquam? Praesentium, esse et.</li> </ul> </div> </div>

  • Thanks, helped! - Valery Emelyanov