We Keep Coding

Add arrows and autoplay to owl carousel template

I downloaded a template for owl.carousel.min.js - I have no idea how to add autoplay and arrows.
It's on a test server on http://testing.r2group.co.za/Test/index.html about halfway down. I would appreciate ANY help, as I'm proficient with HTML, but the JS is beyond me. (why I downloaded a template)

Have you found documentation for how to use the carousel? That is a good place to start.
The owl is part of a theme I am using. Looks like this javascript is included after the carousel.
<script>
jQuery(function($){
$("#latest_news .owl-carousel").owlCarousel({
lazyLoad: true,
responsiveRefreshRate: 50,
slideSpeed: 500,
paginationSpeed: 500,
scrollPerPage: true,
stopOnHover: true,
rewindNav: true,
rewindSpeed: 600,
pagination: true,
navigation: false,
autoPlay: true,
singleItem: true
});
});
</script>
This tells the browser to start a new script with jQuery.
jQuery(function($){
//code
});
Inside this function is specific to Owl Carousel.
$("latest_news .owl-carousel") selects the proper element. This is where you will use your own CSS selectors to get your slider.
It is being passed a javascript object of parameters for the slider. For your autoplay, you can give it
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true
});
The arrows are also described by a setting in this object. Looks like the left/right arrows can be added like this:
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
So, at a minimum to get your arrows and autoplay, your script should look like this:
<script>
jQuery(function($){
$("#YOUR-ELEMENT .owl-carousel").owlCarousel({
autoplay: true,
navigationText:["<i class='icon-left-open'></i>","<i class='icon-right-open'></i>"]
});
});
</script>
It would be worth looking at which other settings you can change for greater customization. The slideSpeed and rewindSpeed, for example, could be a good place to get familiar playing with javascript.

Synchronization two different slideshow jquery plugins

please go to this Address:
http://pakianco.ir/test/index.php
on the above of page i use two different slideshow for displaying company products. these two slideshow must be consonant means that they must be start at same time and images used in two slideshow must be change Simultaneously.But it did not happen.
i use two different plugin for that. left slideshow is bootstrap carousel plugin and right slideshow is flux Slider.
this code is for right slideshow:
$(function(){
window.myFlux = new flux.slider('#slideshow', {
autoplay: true,
pagination: false,
transitions: ['blocks'],
delay: 5000
});
});
and this is for left slideshow:
$('#slides.carousel').carousel({
'interval': 5000,
'pause':'false',
'wrap':'false'
});
can you help me to doing that

Carousel inside tabs

I have 4 tabs, each containing a carousel. The problem is that only the carousel in the first tab works fine. If you activate the second tabs, the carousel divs are all collapsed.
Here is an example with bootstrap 3 tabs and 'slick' plugin for the carousel: http://www.example.design-way.ro/
I tried multiple tabbing scripts and it's the same problem no matter what I use.
The carousel works fine in the second tab if you try to move it a bit..then it somehow activates.
Is this a plugin initialization problem? Here's how I do it:
$('.carousel').slick({
slidesToShow: 3,
slidesToScroll: 1,
dots: false,
arrows: true
});
Please give me some solution or idea to get this carousel working properly. I tried tweaking the css but I got no result.

I have meet this issue When have 3 tabs, each containing a carousel.
PROBLEM:
The problem is that only the carousel in the first tab works fine.
If you activate the second tabs, the carousel divs are all collapsed.
SOLUTION:
After mail to auther of script for help. We have the resolve:
Moved all CSS files first, followed by all js files
Started javascript of Carousel first and Tabs next
For my sample has used script from:
+ TABs script: Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent
demo: http://www.racotecnic.com/tutorials/tabbedcontent/demo.html
download: http://www.jqueryscript.net/demo/Simple-Tabbed-Content-Slider-Plugin-For-jQuery-tabbedcontent/#tab-1
+ Carousel script: als.musings.it

I'm not familiar with the tabs plugin you used, but you should enable carousel only on active (and visible) tabs only (you should have a callback for tab switching)

I also faced the same problem. The best ever solution I have found in this: http://jsfiddle.net/phpdeveloperrahul/bejFM/
Not only that. bxSlider offers a lot of options those are easy to understand and use. Some of the options I am mentioning in the following section:
mode: 'horizontal',
auto: true,
autoControls: true,
pause: 2000,
maxSlides: 4,
minSlides: 1,
controls: true,
infiniteLoop: true,
moveSlideQty: 1,
slideWidth: 200,
responsive: true,
Hope this will fulfill your need.

responsiveslides.js - auto not working

I am using this script to add responsive slideshows to a little website. I have not found a perfect slideshow script yet, and I doubt it exists. I have come from owl-slider, flux-slider to jquery basic slider, and now I have arrived at responsiveslides.js (responsiveslides.com / https://github.com/viljamis/ResponsiveSlides.js)
My Problem is, that I cannot get the auto-setting to work. This is my code to fire the plugin:
$(".rslides_home").responsiveSlides({
'pause':true
});
This setting should stop the animation, I only want it to slide per click. But it doesnt do a thing. Changing the default settings does the job though.
Has anyone an Idea how to solve that?

You are using the wrong option. "Pause" has a different meaning in the slider.
Auto-option defines if the slider is autoplaying.
$(".rslides_home").responsiveSlides({
auto: false
});
Here are the defined options for the slider. As you can see, the "pause" option is used when you want the slider to stop when hovered.
$(".rslides").responsiveSlides({
auto: true, // Boolean: Animate automatically, true or false
speed: 500, // Integer: Speed of the transition, in milliseconds
timeout: 4000, // Integer: Time between slide transitions, in milliseconds
pager: false, // Boolean: Show pager, true or false
nav: false, // Boolean: Show navigation, true or false
random: false, // Boolean: Randomize the order of the slides, true or false
pause: false, // Boolean: Pause on hover, true or false
pauseControls: true, // Boolean: Pause when hovering controls, true or false
prevText: "Previous", // String: Text for the "previous" button
nextText: "Next", // String: Text for the "next" button
maxwidth: "", // Integer: Max-width of the slideshow, in pixels
navContainer: "", // Selector: Where controls should be appended to, default is after the 'ul'
manualControls: "", // Selector: Declare custom pager navigation
namespace: "rslides", // String: Change the default namespace used
before: function(){}, // Function: Before callback
after: function(){} // Function: After callback
});
These options are taken from http://responsiveslides.com/

Nivo slider not working properly at first time sometimes

I have a website. Some pages have a slider, others not. I have this issue with nivo slider. Sometimes, can't figure out when, the slider isn't loading, so no image is shown. If you click again the same page, the slider is loading correctly and everything works fine. The problem is not standard, you have to try it many times by navigating to all pages. Please check it out, spend 1-2 minutes by visiting from the menu bar all pages so you can see the problem. The problem is more often with chrome - IE.
The link is here http://www.secureshop.gr/POOL/citycars/website
Thank you in advance.

Perhaps load your script for Nivo at the BASE of the body to ensure it doesn't run in the head and cause any sort of timeout issues.
As soon as the DOM understands that there is an img, it will continue, and that image will load in the meantime while it progresses down the rest of your HTML. Perhaps all of the imgs aren't downloading, hence the Nivo Slider not rendering it properly.
<script type="text/javascript" src="js/jquery.nivo.slider.pack.js"></script>
<script>
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
slices: 15, // For slice animations
boxCols: 8, // For box animations
boxRows: 4, // For box animations
animSpeed: 500, // Slide transition speed
pauseTime: 5000, // How long each slide will show
startSlide: 0, // Set starting Slide (0 index)
directionNav: true, // Next & Prev navigation
directionNavHide: true, // Only show on hover
controlNav: false, // 1,2,3... navigation
controlNavThumbs: false, // Use thumbnails for Control Nav
controlNavThumbsFromRel: true, // Use image rel for thumbs
controlNavThumbsSearch: '.jpg', // Replace this with...
controlNavThumbsReplace: '_thumb.jpg', // ...this in thumb Image src
keyboardNav: true, // Use left & right arrows
pauseOnHover: true, // Stop animation while hovering
manualAdvance: false, // Force manual transitions
captionOpacity: 0.8, // Universal caption opacity
prevText: '', // Prev directionNav text
nextText: '', // Next directionNav text
randomStart: false, // Start on a random slide
beforeChange: function(){}, // Triggers before a slide transition
afterChange: function(){}, // Triggers after a slide transition
slideshowEnd: function(){}, // Triggers after all slides have been shown
lastSlide: function(){}, // Triggers when last slide is shown
afterLoad: function(){} // Triggers when slider has loaded
});
</script>
</body>