carousel

问题 I'm using the jquery carousel and I have the image auto rotating here ( http://jsbin.com/unoce/2), so the issue I'm having is the content on the left is not AUTO rotating "with" the image and the arrow selection is not either. It only works when I click the content on the left and then the image on the right along with the arrow move appropriately together. Can someone provide support so I may get the text and the arrow to "auto" rotate with the image? This code below would only rotate the

问题 I have a JSON data from FB api reviews, and I want to insert the data from the JSON to an owl carousel div elements. I want each review to be created in a separate div element and that div element to be inside the owl carousel, and to work as carousel. In the HTML I only have this: <div id="carousel" class="owl-carousel" style="color: white;"> </div> Previously I have set up the carousel, now my question is how to take the data from the JSON and insert in the div owl-carousel class but I want

问题 This question already has answers here : How to Include CSS and JS files via HTTPS when needed? (4 answers) Closed 6 months ago . I have the following code split into html, css and javascript, but i do not know how to combine them in notepad so i can embed it onto my website. (The image sources and texts are just examples.) HTML <div id="wrapper"> <div id="text"> <h3>Geneva International Motor Show</h3> <p>The Geneva International Motor Show will open to the public from 03 to 13 March,

问题 I hope this is not a "big ask" but I'm stuck. I asked this issue on github issues#1334 but I have not got any responsive from the maintainers of the project. Hopefully I can get help here. Overview My issue is that I'm trying to adjust the variable width slider (from react-slick documentation) in order to be: finite responsive (to different viewports) (if possible to display as many slides according to viewport width) scroll only 100% visible slides slides should fill the div display area

问题 I have a carousel with nine slides, the first of which has a class of 'active'. <ul class='nav'> <li class='left'>left</li> <li class='right'>right</li> </ul> <ul class='carousel'> <li class='active'></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> When the 'right' button is clicked, the active class needs to move to the next li (it also needs to be applied back to the first li after the last one). And obviously, the active class needs to move in the

问题 I'm looking for a generic (native) Javascript function that could tell if an element is visible, that can take into account elements in a "carousel" (aka "slider"); These are usually containers with "slides", each an element positioned to the left (or right) of the previous one - but only one of them is actually visible. An example can be seen in this web page: http://www.technobuffalo.com/2015/07/22/iphone-7-concept-sports-quad-hd-retina-display-wireless-charging/ EDIT: An example for a

问题 I would like to always see the 1st item when I click to open this bootstrap modal carousel. If I open the modal and carousel to a slide, it will remain on that slide the next time I open the modal. Example scenario: Open modal Carousel to 3rd item Close modal Open modal again 3rd item is shown How can I make sure that the 1st item is always shown upon opening the modal? I've tried various ways of assigning class="active" with JQuery but haven't had any success. Here is a Demo The code you'll

问题 I have a simple codepen set up with what I thought should work as a slider. It includes bootstrap.css, jquery.js, and bootstrap.js. I can't figure out what is missing that is stopping the js from sliding. The bootstrap.css file is at https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css The jquery is https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js And the bootstrap.js is at https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/js

问题 Its sliding on other browser, but in Safari it change the image but not sliding. I tried this code and also transition.js $(document).ready(function() { $('#Carousel').carousel({ interval: 1000 }); }); [data-slide-to] { cursor: pointer; } $('.carousel').carousel() $('.carousel').carousel('cycle'); 回答1: A little late ... but i fixed it by placing a block element with negative margin into each carousel item. like so: <div style="margin: 0 -5px"> </div> 来源： https://stackoverflow.com/questions

问题 I've been trying to create something like this using slick.js, and i really can't get my head around it. I have got the current code in place. How to make the center slide image 100% width and height and add paddings to the slide? It seems to be not working. I'd really appreciate any help. Thanks. $('.slider').slick({ centerMode: true, centerPadding: '30px', slidesToShow: 3, adaptiveHeight: false }); .slick-slide img { max-width: 100%; transition: transform 0.5s; } .slick-slide.slick-center