Develop Reference

How to show pagination dots in owl carousel

I am using Owl Carousel 2. I want to display a dot for every item, but I want to show 5 dots at a time. Can anyone suggest to me how I will do this? Thanks.
HTML:
<div id="owl-demo" class="owl-carousel">
<div class="item">
<img src="images/banner/A.png" alt="A"/>
</div>
<div class="item">
<img src="images/banner/B.png" alt="B"/>
</div>
<div class="item">
<img src="images/banner/C.png" alt="C"/>
</div>
<div class="item">
<img src="images/banner/D.png" alt="D"/>
</div>
<div class="item">
<img src="images/banner/E.png" alt="E"/>
</div>
<div class="item">
<img src="images/banner/F.png" alt="F"/>
</div>
</div>
<div id="dots" class="owl-carousel">
<div class="item"><span>A</span></div>
<div class="item"><span>B</span></div>
<div class="item"><span>C</span></div>
<div class="item"><span>D</span></div>
<div class="item"><span>E</span></div>
<div class="item"><span>F</span></div>
</div>
JS:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true
});
});

Just change your JS to:
$(document).ready(function(){
$("#owl-demo").owlCarousel({
items:1,
loop: true,
autoplay:true,
autoplaySpeed: 500,
dots:true,
dotsContainer:'#dots',
nav: true,
dotsEach: true
});
});

bxslider slider image doesn't resize when I resize the browser

I'm going straight to the point here..
i'm making the site responsive and I am using bxslider the functionality works fine but what I want is to fit the image inside their respective divs when I tried to resize...
but when I omit the slider.reloadShow() on the resize event... the image resize just fine... event for slider won't work anymore..
HTML
<div class="outside">
<div class="custom-controls">
<ul>
<li><span id="slider-prev"></span></li>
<li><span id="slider-next"></span></li>
</div>
</div>
<div class="slide-content">
<div class="slider8">
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar1" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar2" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar3" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar4" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar5" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar6" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar7" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar8" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar9" width="100%"></div>
<div class="slide"><img src="http://placehold.it/300x100&text=FooBar10" width="100%"></div>
</div>
</div>
JQUERY
var slider;
$(document).ready(function(){
slider=$('.slider8').bxSlider({
auto: true,
autoHover: true,
// autoControls: true,
mode: 'vertical',
minSlides: 5,
slideMargin: 10,
pager: false,
speed: 2000,
nextSelector: '#slider-next',
prevSelector: '#slider-prev',
pager: false,
pause: 100,
nextText: '<i class="fa fa-caret-down"></i>',
prevText: '<i class="fa fa-caret-up"></i>'
});
$(window).resize(function(){
slider.reloadShow();
});
});

You can do this via css
.slide-content .slide img { width:100%; }

Owl Carousel 2 animation not work

I have followed this instructions, but the slider not do the fadeOut and fadeIn animation: http://www.owlcarousel.owlgraphic.com/demos/animate.html
Head Css:
<link rel="stylesheet" href="css/animate.css">
<link rel="stylesheet" href="css/owl.carousel.css">
Html item:
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="svg/shirt-design-1.svg" alt="">a
</div>
<div style="width:186px">
<img src="svg/shirt-design-2.svg" alt="">
</div>
</div>
Javascript:
<script type="text/javascript" src="js/owl.carousel.min.js"></script>
<script>
$( document ).ready(function() {
$('#product-designs-presentation').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
autoPlay:true,
autoPlayTimeout:1000,
autoplayHoverPause:true,
navigation: true,
navigationText: ["prev","next"]
});
});
</script>
What is the problem?

You missed class class='owl-carousel'this is needed for owl-carousel working. I think this is the problem owl docs
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="svg/shirt-design-1.svg" alt="">a
</div>
<div style="width:186px">
<img src="svg/shirt-design-2.svg" alt="">
</div>
</div>
Use this css this is working
$(document).ready(function() {
$('#product-designs-presentation').owlCarousel({
animateOut: 'fadeOut',
animateIn: 'fadeIn',
items:1,
autoPlay:true,
autoPlayTimeout:1000,
autoplayHoverPause:true,
navigation: true,
navigationText: ["prev","next"]
});
});
<link href="http://www.owlcarousel.owlgraphic.com/assets/owlcarousel/assets/owl.carousel.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.0.0-beta.3/owl.carousel.min.js"></script>
<div id="product-designs-presentation" class="owl-carousel">
<div style="width:186px">
<img src="http://static.vecteezy.com/system/resources/previews/000/095/621/original/free-leaf-vector.png" alt="">a
</div>
<div style="width:186px">
<img src="https://pixabay.com/static/uploads/photo/2013/07/12/15/29/maple-149907_960_720.png" alt="">b
</div>
</div>

Why is flexslider not loading "off-page" images?

I'm working on this website:
http://www.lakeofthewoodsadventures.com/local/index.html
I got the homepage image slider working, but it won't render the last two pages of the slider, no matter which files they are.
My question is: why is it doing that? Is it because it considers what is "off-page" not needed? The images are the same size, 1280x480 (scaled to 340 height).
Here are my settings:
Script in Head:
<link rel="stylesheet" href="flexslider.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script src="jquery.flexslider.js"></script>
<script type="text/javascript" charset="utf-8">
$(window).load(function() {
$('.flexslider').flexslider({
animation: "slide",
controlNav: false,
animationLoop: true,
slideshow: true,
useCSS: true,
itemWidth: 900,
});
});
</script>
Markup:
<div class="slide-container row">
<div class="flexslider slideEdit">
<ul class="slides">
<li>
<img src="images/slide6.JPG" alt="Slide 6">
</li>
<li>
<img src="images/slide7.JPG" alt="Slide 7">
</li>
<li>
<img src="images/slide8.JPG" alt="Slide 8">
</li>
<li>
<img src="images/slide9.jpg" alt="Slide 9">
</li>
<li>
<img src="images/slide10.jpg" alt="Slide 10">
</li>
</ul>
</div>
</div>

No, it is because those images do not exist (404 File Not Found):
http://www.lakeofthewoodsadventures.com/local/images/slide9.jpg
http://www.lakeofthewoodsadventures.com/local/images/slide10.jpg
Looks like it is a capitalization issue:
http://www.lakeofthewoodsadventures.com/local/images/slide9.JPG
http://www.lakeofthewoodsadventures.com/local/images/slide10.JPG

Have two Javascripts on one page, other one stops the other from working

I currently have two different javascripts running on my page. One for a slideshow and another for a timed image swap. I can only get one or the other to work, depending on which one of the scripts is lower in the code. I read many tutorials and it seemed adding <body onload="func1();func2()"> would fix the problem but it did not.
I have made two sample pages
Where image swap works but slide show does not show up
http://pancakeparadise.com/shirtswap.html
Where slide show shows up and works but images do not swap out
http://pancakeparadise.com/shirtswap1.html
Thank you for any help you can provide!
<!DOCTYPE html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(
function func2(){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
}
);
</script>
</head>
<body onload="func1();func2()">
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" >
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
</aside>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script>
$(function func1() {
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
</script>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>

You have two jQuery files included in the same HTML page which is causing the conflict. Try this code.
<!DOCTYPE html>
<head>
<link href="css/style.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:700' rel='stylesheet' type='text/css'>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="jquery.slides.min.js"></script>
<script type="text/javascript" src="js/jquery.innerfade.js"></script>
<script type="text/javascript">
$(document).ready(function (){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
</script>
</head>
<body>
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" >
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt="">
</aside>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>

I have cleaned up your code a little bit... dont use body onload both functions and then define one of the functions later in the code... well here it goes, this worked for me...
$(document).ready(function func2(){
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
});
$(document).ready(function func1() {
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
});
<div id="wholebody">
<section id="slideshow">
<aside id="slides">
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt ="" />
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
<img src="http://placehold.it/1000x500" id="frontpicturesize" alt=""/>
</aside>
</section>
<aside id="frontbubbles">
<aside id="shirtswapfront">
<p id="fronttextheader">Shirt Swap!</p>
<ul id="portfolio">
<li>
<a href="">
<img src="http://pancakeparadise.com/img/1.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/2.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/3.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/4.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/5.jpg" alt="" />
</a>
</li>
<li>
<a href="">
<img src="http://pancakeparadise.com/img/6.jpg" alt="" />
</a>
</li>
</ul>
</aside>
</aside>
</div>
now add your css and js files in the head like usual... it should work. here is a fiddle link for it as well http://jsfiddle.net/z5yeLq2k/

If you want both of these functions to execute, the easiest way possible is to not put them in separate functions, or to not put them in functions at all. Here is what I mean...
$(document).ready(
$('ul#portfolio').innerfade({
speed: 'slow',
timeout: 4000,
type: 'sequence',
containerheight: '500px'
});
$('#slides').slidesjs({
width: 980,
height: 500,
play: {
active: true,
auto: true,
interval: 4500,
swap: true,
pauseOnHover: true
}
});
);
Outside of functions, as soon as the document.ready executes (once the page is done loading), both of those pieces of code will be executed sequentially.
EDIT: Also, as was said in another answer, you are including jquery twice...don't do that.