I'm trying to convert the product-page tabs to an accordion on my Woocommerce store, but things won't work. When i click on my links, the dropdown doesn't show, it doesn't do nothing ... The height should animate as well as my "+" icon, but nothing happens. It looks like it doens't wnat to add the "is-open" class on the clicked element. So i think my error lies in my js, but i don't see where!
Here's my tabs.php file :
<?php
/**
* Single Product tabs
*
* This template can be overridden by copying it to yourtheme/woocommerce/single-product/tabs/tabs.php.
*
* HOWEVER, on occasion WooCommerce will need to update template files and you
* (the theme developer) will need to copy the new files to your theme to
* maintain compatibility. We try to do this as little as possible, but it does
* happen. When this occurs the version of the template file will be bumped and
* the readme will list any important changes.
*
* #see https://docs.woocommerce.com/document/template-structure/
* #package WooCommerce\Templates
* #version 3.8.0
*/
if (!defined('ABSPATH')) {
exit;
}
/**
* Filter tabs and allow third parties to add their own.
*
* Each tab is an array containing title, callback and priority.
*
* #see woocommerce_default_product_tabs()
*/
$product_tabs = apply_filters('woocommerce_product_tabs', array());
if (!empty($product_tabs)) : ?>
<div class="c-accordion">
<div class="c-accordion__wrapper">
<div class="c-accordion__content-wrapper">
<?php foreach ($product_tabs as $key => $product_tab) : ?>
<div class="c-accordion__content js-accordion">
<div class="c-accordion__content-title">
<span class="c-accordion__plus"></span>
<p class="u-a1">
<?php echo wp_kses_post(apply_filters('woocommerce_product_' . $key . '_tab_title', $product_tab['title'], $key)); ?>
</p>
</div>
<div class="c-accordion__content-main js-content">
<?php
if (isset($product_tab['callback'])) {
call_user_func($product_tab['callback'], $key, $product_tab);
}
?>
</div>
</div>
<?php endforeach; ?>
</div>
</div>
</div>
<?php endif; ?>
Here's my js :
// Custom Tabs
('use strict');
var Accordion = /** #class */ (function () {
function Accordion() {
this.items = document.querySelectorAll('.js-accordion');
this.itemClass = '.js-accordion';
this.contentWrapperClass = '.js-content';
this.css = {
open: 'is-open',
};
if (this.items.length > 0) {
this.init();
}
}
Accordion.prototype.init = function () {
var _this = this;
for (var i = 0; i < this.items.length; i++) {
this.items[i].addEventListener('click', function (ev) {
ev.preventDefault();
var current = ev.currentTarget;
var contentWrapper = current.querySelector(_this.contentWrapperClass);
if (!current.classList.contains(_this.css['open'])) {
_this.slideDown(current, contentWrapper);
return;
}
_this.closeItem();
});
}
};
Accordion.prototype.getActiveElement = function () {
var accordionItems = document.querySelectorAll('' + this.itemClass);
var active = null;
for (var i = 0; i < accordionItems.length; i++) {
if (accordionItems[i].classList.contains(this.css['open'])) {
active = accordionItems[i];
}
}
return active;
};
Accordion.prototype.slideDown = function (element, content) {
var _this = this;
var contentHeight = 0;
var active = this.getActiveElement();
for (var i = 0; i < this.items.length; i++) {
this.items[i].classList.remove(this.css['open']);
}
element.classList.add(this.css['open']);
if (active) {
var activeContent = active.querySelector(this.contentWrapperClass);
TweenMax.to(activeContent, 0.6, {
height: 0,
onStart: function () {
_this.openItem(content, contentHeight);
},
});
return;
}
// else
this.openItem(content, contentHeight);
};
Accordion.prototype.openItem = function (content, contentHeight) {
TweenMax.set(content, {
height: 'auto',
onComplete: function () {
contentHeight = content.clientHeight;
TweenMax.set(content, {
height: 0,
onComplete: function () {
TweenMax.to(content, 0.4, {
height: contentHeight,
onComplete: function () {
TweenMax.set(content, {
height: 'auto',
});
},
});
},
});
},
});
};
Accordion.prototype.closeItem = function () {
var active = this.getActiveElement();
if (active) {
var activeContent = active.querySelector(this.contentWrapperClass);
active.classList.remove(this.css['open']);
TweenMax.to(activeContent, 0.6, {
height: 0,
});
}
};
return Accordion;
})();
new Accordion();
and here's my css (scss) :
.c-accordion {
max-width: 100%;
width: 100%;
font-family: helvetica;
&__wrapper {
display: flex;
flex-wrap: wrap;
justify-content: center;
height: auto;
}
&__content-wrapper {
flex: 1 0 100%;
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
&__content-title {
position: relative;
transition: 0.3s;
padding-top: 10px;
padding-bottom: 10px;
padding-left: percentage(1/15);
}
&__content-main {
height: 0;
overflow: hidden;
padding-left: percentage(1/15);
display: flex;
flex-wrap: wrap;
p {
max-width: 300px;
}
}
&__content {
position: relative;
overflow: hidden;
cursor: pointer;
flex: 1 0 auto;
&:first-of-type {
&:before {
display: none;
}
}
&:before {
content: '';
width: 100%;
border-top: 2px solid $black;
position: absolute;
left: 0;
top: 0;
}
&:last-child {
&:after {
content: '';
width: 100%;
border-top: 2px solid $black;
position: absolute;
left: 0;
bottom: 0;
}
}
&__text {
padding-top: 10px;
padding-bottom: 20px;
line-height: 1.38;
}
&:hover {}
&.is-open {
transition: 0.3s;
.c-accordion {
&__plus {
transform: translateY(-50%) rotate(90deg);
&:after {
opacity: 0;
}
}
&__content-main {
height: auto;
}
}
}
}
&__plus {
width: 3vh;
height: 3vh;
position: absolute;
left: 0px;
top: 50%;
cursor: pointer;
opacity: 1;
transform: translateY(-50%) rotate(0deg);
transition: 0.4s;
&:before {
content: '';
height: 100%;
border-left: 2px solid $black;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
opacity: 1;
}
&:after {
content: '';
width: 100%;
border-top: 2px solid $black;
position: absolute;
opacity: 1;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
transition: opacity 0.2s;
}
}
&__left {
padding-top: 10px;
padding-bottom: 75px;
width: percentage(6/14);
padding-right: 10px;
}
&__right {
padding-top: 10px;
padding-bottom: 75px;
width: percentage(8/14);
padding-right: 10px;
}
}
Does someone have any idea what i'm doing wrong ?
Thanks a lot !
Fixed, the error wasn't with this JS but there was a conflict with another plugin. Solved
I try to build a Slideshow in JS + CSS and it works pretty well except one visual glitch. The Transition to the last slides seems somehow broken.
But I couldn't figure out what the problem is. If I comment out the "offset" transition on the last slide, the error doesn't occure.
This is the codeine I am talking about: https://codepen.io/marianbreitmeyer/pen/paeYgZ
The Block of code I mentioned is this one:
const showNext = function() {
clicked = true;
for (i = 0; i <= slides.length-1; i++) {
if( parseInt(slides[i].style.zIndex) === slides.length) {
console.log(slides[i].innerHTML);
triggerAnimation(slides[i], 'offcanvas');
} else if (parseInt(slides[i].style.zIndex) === slides.length-1) {
//the line below triggers the problem
triggerAnimation(slides[i], 'offset');
}
}
};
Maybe someone with more experience could help me :)
Your code might be more simple:
const btn = document.getElementsByClassName('arrow')[0];
const slides = document.getElementsByClassName('slide');
slides[slides.length - 1].classList.add('offset', 'next');
btn.addEventListener("click", function(e) {
var o, n;
for (var i = 0; i < slides.length; i++) {
if (slides[i].classList.contains('offset')) {
slides[i].classList.remove('offset', 'next')
slides[i].classList.add('offcanvas');
o = (slides[i - 1] || slides[slides.length - 1]);
n = (slides[i - 2] || slides[slides.length + i - 2]);
}
if (slides[i].offsetLeft < -slides[i].offsetWidth) {
slides[i].classList.remove('offcanvas', 'next');
}
}
o.classList.add('offset');
n.classList.add('next');
}, false);
.container {
width: 100%;
height: 100vh;
background: brown;
position: relative;
}
body {
text-align: center;
font-size: 2rem;
}
.slide {
position: absolute;
top: 0;
left: 90%;
width: 100%;
height: 100%;
}
.slide:nth-child(1) {
background: pink;
}
.slide:nth-child(2) {
background: blue;
}
.slide:nth-child(3) {
background: green;
}
.slide:nth-child(4) {
background: grey;
}
.slide:nth-child(5) {
background: yellow;
}
.slide.next {z-index:1}
.slide.offset {
left: -10%;
z-index: 2;
transition: left .65s ease-in-out;
}
.slide.offcanvas {
left: -110%;
z-index: 2;
transition: left .65s ease-in-out;
}
.arrow {
position: absolute;
right: 5%;
top: 25px;
z-index: 9;
height: 50px;
width: 50px;
cursor: pointer;
}
.arrow:hover path {
transform: translate(16px, 0px);
}
path {
position: absolute;
top: 0;
left: 0;
transition: all .2s ease-in-out;
}
<div class="container">
<div class="slide">1 = pink</div>
<div class="slide">2 = blue</div>
<div class="slide">3 = green</div>
<div class="slide">4 = grey</div>
<div class="slide">5 = yellow</div>
<svg xmlns="http://www.w3.org/2000/svg" class="arrow"><path d="M19.443 5.17L30.138 15.5H-.095v1h30.233L19.443 26.829l.696.719L32.095 16 20.139 4.451z"/></svg>
</div>
I am in a class that is writing an online UNO game (this is not a graded assignment, just a class project). I am currently trying to develop the functionality to play a card. Basically, the player needs to be able to click on a card in their hand and have it appear in the discard pile. I thought about animating this, but we have 1 week left and a lot to get done, so my idea is to just have the player double-click on the card and it will appear in the discard pile.
Each of the cards in all the players' hands are separate divs created in javascript via information from the back end. I do not, however, have the code connected to the back end yet because I need to be able to test my functions and script now. Thus I have currently hard-coded the cards.
The discard pile has one card on it. I have determined that we don't actually need every single card to be placed on the discard pile. Rather, it should be enough to change the color and the rank of the card on the discard pile to reflect the card discarded and just eliminate that div from the player's hand. If you think I am wrong about this, please tell me.
That is where my problem is. I have a bit of script here that is supposed to erase the color of the discard pile card and replace it with the color of the div card that was clicked on in the player's hand. Here is the code (full code posted later in the post):
/*
The double-click on the card in the player's hand does erase the color from the discard pile card, but it doesn't add the color of the card from the hand to the discard pile card. I have tried different variations of the code, but none seem to work. Can anyone help me? Or am I thinking about this the wrong way?
*/
$(document).ready(function() {
function playCardThisPlayer(game) {
currCardColor = $(this).color;
$(".card").dblclick(function() {
$(".discardPile").removeClass(game.discardPile.color);
$(".discardPile").addClass.$(currCardColor);
});
}
playCardThisPlayer(gameTurn);
var gameTurn = {
deckCount: 40,
discardPile: {
color: "yellow",
rank: "2"
},
players: [{
name: "David", //players[0].name
hand: [{
color: "yellow",
rank: "3"
},
{
color: "blue",
rank: "3"
},
{
color: "red",
rank: "4"
},
{
color: "black",
rank: "w"
},
{
color: "blue",
rank: "7"
},
{
color: "blue",
rank: "8"
},
{
color: "green",
rank: "S"
}
]
},
{
name: "Dan", //players[1].name
hand: 4 //players[1].hand
},
{
name: "John", //players[2].name
hand: 5 //players[2].hand
},
{
name: "Kent", //players[3].name
hand: 10 //players[3].hand
},
{
name: "Amy",
hand: 15
}
]
};
function makePlayerList(game) {
for (i = 0; i < game.players.length; i++) {
$(".list").append("<p>" + (i + 1) + ". " + game.players[i].name + "</p>");
}
}
makePlayerList(gameTurn);
function createCards(game) {
var currPlayer = game.players[0];
var hand = $("<div class='hand'></div>");
for (var i = 0; i < currPlayer.hand.length; i++) {
var card = $("<div class='card'></div>" /*<div class='playerLabel'></div>"*/ );
card.addClass(".oval-shape");
var corner1 = $("<div></div>");
var middle = $("<div></div>");
var corner2 = $("<div></div>");
var oval = $("<div></div>")
corner1.append(currPlayer.hand[i].rank);
corner1.addClass("corner1");
middle.append(currPlayer.hand[i].rank);
middle.addClass("middle");
oval.addClass("oval-shape");
card.append(oval);
corner2.append(currPlayer.hand[i].rank);
corner2.addClass("corner2");
card.append(corner1);
card.append(middle);
card.append(corner2);
card.addClass(currPlayer.hand[i].color);
hand.append(card);
}
$("#table").append(hand);
}
function createCardBacks(game) {
for (var i = 1; i < game.players.length; i++) {
var hand = $("<div class='hand'></div>");
for (var j = 0; j < game.players[i].hand; j++) {
var cardBack = $("<div class='cardBack black'></div>");
var oval = $("<div></div>")
oval.addClass("oval-shape");
cardBack.append(oval);
hand.append(cardBack);
}
$("#table").append(hand);
}
}
function createDiscardPile(game) {
var topOfDiscardPile = $(".discardPile");
topOfDiscardPile.addClass(".oval-shape");
var corner1 = $("<div></div>");
var middle = $("<div></div>");
var corner2 = $("<div></div>");
var oval = $("<div></div>")
corner1.append(game.discardPile.rank);
corner1.addClass("corner1");
middle.append(game.discardPile.rank);
middle.addClass("middle");
oval.addClass("oval-shape");
topOfDiscardPile.append(oval);
corner2.append(game.discardPile.rank);
corner2.addClass("corner2");
topOfDiscardPile.append(corner1);
topOfDiscardPile.append(middle);
topOfDiscardPile.append(corner2);
topOfDiscardPile.addClass(game.discardPile.color);
}
createCards(gameTurn);
createCardBacks(gameTurn);
createDiscardPile(gameTurn);
function playCardThisPlayer(game) {
currCardColor = $(this).color;
$(".card").dblclick(function() {
$(".discardPile").removeClass(game.discardPile.color);
$(".discardPile").addClass.$(currCardColor);
});
}
playCardThisPlayer(gameTurn);
function fan(container, angle) {
var num = $(container).children().length;
var rotate = -angle * Math.floor(num / 2);
$(container).children().each(function() {
$(this).data("rotate", rotate);
$(this).css("transform", "translate(-50%,0) rotate(" + rotate + "deg)");
$(this).css("transform-origin", "0 100%");
rotate += angle;
});
$(container).children().mouseenter(function() {
var rotate = parseInt($(this).data("rotate")) * Math.PI / 180;
$(this).css("top", (-3 * Math.cos(rotate)) + "vmin");
$(this).css("left", (3 * Math.sin(rotate)) + "vmin");
});
$(container).children().mouseleave(function() {
$(this).css("top", 0);
$(this).css("left", 0);
});
}
var rotate = 0;
var num = $("#table").children().length;
var angleInc = 360 / num;
$("#table").children().each(function(idx) {
$(this).css("transform", "rotate(" + rotate + "deg)");
$(this).append("<div class='playerLabel'><span>" + (idx + 1) + "</span></div>")
$(this).css("transform-origin", "50% -18vmin");
fan(this, (idx == 0) ? 7 : 2.5);
rotate += angleInc;
});
});
* {
margin: 0;
padding: 0;
}
body {
background: #00a651;
}
#table {
width: 100vmin;
height: 100vmin;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #00FF00;
border-radius: 50%;
}
.card {
position: absolute;
top: 0;
left: 0;
display: inline-block;
}
.discardPile {
position: absolute;
bottom: 0;
left: 0;
display: inline-block;
}
.card,
.discardPile {
width: 15vmin;
height: 22vmin;
border-radius: 1vmin;
background: #fff;
-webkit-box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.3);
text-shadow: 2px 2px 0px #808080;
border: .3em solid white;
transition: all 0.125s;
}
.hand {
position: absolute;
left: 50%;
bottom: 10vmin;
width: 0;
height: 22vmin;
}
span {
position: absolute;
z-index: 100;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.playerLabel {
margin-top: -10vh;
background-color: red;
width: 3vmin;
height: 3vmin;
border: 1px solid black;
border-radius: 50%;
}
.list {
color: yellow;
font-family: 'Gloria Hallelujah', cursive;
font-size: 3vmin;
}
.yellow {
background-color: yellow;
}
.blue {
background-color: blue;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.black {
background-color: black;
}
.corner1 {
position: absolute;
font-size: 3.5vmin;
left: .5vmin;
top: .5vmin;
color: white;
}
.corner2 {
position: absolute;
font-size: 3.5vmin;
right: .5vmin;
bottom: .5vmin;
color: white;
}
.middle {
position: absolute;
font-size: 10vmin;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.oval-shape {
width: 10vmin;
height: 22vmin;
background: white;
border-radius: 7vmin / 15vmin;
transform: translate(-50%, -50%) rotate(25deg);
margin: 0 auto;
position: absolute;
left: 50%;
top: 50%;
}
.slide-out {
top: -3vmin;
}
.cardBack {
position: absolute;
top: 0;
display: inline-block;
width: 15vmin;
height: 22vmin;
border-radius: 1vmin;
-webkit-box-shadow: .3vmin .3vmin .7vmin rgba(0, 0, 0, 0.3);
box-shadow: .3vmin .3vmin .7vmin rgba(0, 0, 0, 0.3);
text-shadow: .2vmin .2vmin 0 #808080;
border: .3em solid white;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>UNO Cards</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css?family=Gloria+Hallelujah" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="style.css">
<script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script>
</head>
<body>
<div class="list"></div>
<div class="discardPile"></div>
<div id="table"></div>
<script src="script.js"></script>
</body>
</html>
Thanks!
I am using ResponsiveSlides for a photo slideshow on a page, and I cannot make the navigation button show up as they do on the website. Currently, the Previous and Next links appear below the slider as simple hypertext links. Here is how this is showing on the website:
website-slideshow. See the Previous/Next buttons below image. Here is how I would like for this to look: navigation-buttons-centered. I've tried so many different things and nothing is working, so any help would be appreciated.
Here is the code that is being used:
HTML:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="/wp/wp-content/themes/Avada-Child-Theme/responsiveslides.js"></script>
<script>
$(function() {
$(".rslides").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 500,
namespace: "rslides",
});
});
</script>
<link href="/wp/wp-content/themes/Avada-Child-Theme/css/responsiveslides.css" rel="stylesheet" type="text/css" />
<div class="rslides_container">
<ul class="rslides rslides1 centered-btns centered-btns1">
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
<li><img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''></li>
</ul>
</div>
JS:
(function($, window, i) {
$.fn.responsiveSlides = function(options) {
// Default settings
var settings = $.extend({
"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": true, // Boolean: Show pager, true or false
"nav": true, // 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 auto generated 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": $.noop, // Function: Before callback
"after": $.noop // Function: After callback
}, options);
return this.each(function() {
// Index for namespacing
i++;
var $this = $(this),
// Local variables
vendor,
selectTab,
startCycle,
restartCycle,
rotate,
$tabs,
// Helpers
index = 0,
$slide = $this.children(),
length = $slide.length,
fadeTime = parseFloat(settings.speed),
waitTime = parseFloat(settings.timeout),
maxw = parseFloat(settings.maxwidth),
// Namespacing
namespace = settings.namespace,
namespaceIdx = namespace + i,
// Classes
navClass = namespace + "_nav " + namespaceIdx + "_nav",
activeClass = namespace + "_here",
visibleClass = namespaceIdx + "_on",
slideClassPrefix = namespaceIdx + "_s",
// Pager
$pager = $("<ul class='" + namespace + "_tabs " + namespaceIdx + "_tabs' />"),
// Styles for visible and hidden slides
visible = {
"float": "left",
"position": "relative",
"opacity": 1,
"zIndex": 2
},
hidden = {
"float": "none",
"position": "absolute",
"opacity": 0,
"zIndex": 1
},
// Detect transition support
supportsTransitions = (function() {
var docBody = document.body || document.documentElement;
var styles = docBody.style;
var prop = "transition";
if (typeof styles[prop] === "string") {
return true;
}
// Tests for vendor specific prop
vendor = ["Moz", "Webkit", "Khtml", "O", "ms"];
prop = prop.charAt(0).toUpperCase() + prop.substr(1);
var i;
for (i = 0; i < vendor.length; i++) {
if (typeof styles[vendor[i] + prop] === "string") {
return true;
}
}
return false;
})(),
// Fading animation
slideTo = function(idx) {
settings.before(idx);
// If CSS3 transitions are supported
if (supportsTransitions) {
$slide
.removeClass(visibleClass)
.css(hidden)
.eq(idx)
.addClass(visibleClass)
.css(visible);
index = idx;
setTimeout(function() {
settings.after(idx);
}, fadeTime);
// If not, use jQuery fallback
} else {
$slide
.stop()
.fadeOut(fadeTime, function() {
$(this)
.removeClass(visibleClass)
.css(hidden)
.css("opacity", 1);
})
.eq(idx)
.fadeIn(fadeTime, function() {
$(this)
.addClass(visibleClass)
.css(visible);
settings.after(idx);
index = idx;
});
}
};
// Random order
if (settings.random) {
$slide.sort(function() {
return (Math.round(Math.random()) - 0.5);
});
$this
.empty()
.append($slide);
}
// Add ID's to each slide
$slide.each(function(i) {
this.id = slideClassPrefix + i;
});
// Add max-width and classes
$this.addClass(namespace + " " + namespaceIdx);
if (options && options.maxwidth) {
$this.css("max-width", maxw);
}
// Hide all slides, then show first one
$slide
.hide()
.css(hidden)
.eq(0)
.addClass(visibleClass)
.css(visible)
.show();
// CSS transitions
if (supportsTransitions) {
$slide
.show()
.css({
// -ms prefix isn't needed as IE10 uses prefix free version
"-webkit-transition": "opacity " + fadeTime + "ms ease-in-out",
"-moz-transition": "opacity " + fadeTime + "ms ease-in-out",
"-o-transition": "opacity " + fadeTime + "ms ease-in-out",
"transition": "opacity " + fadeTime + "ms ease-in-out"
});
}
// Only run if there's more than one slide
if ($slide.length > 1) {
// Make sure the timeout is at least 100ms longer than the fade
if (waitTime < fadeTime + 100) {
return;
}
// Pager
if (settings.pager && !settings.manualControls) {
var tabMarkup = [];
$slide.each(function(i) {
var n = i + 1;
tabMarkup +=
"<li>" +
"<a href='#' class='" + slideClassPrefix + n + "'>" + n + "</a>" +
"</li>";
});
$pager.append(tabMarkup);
// Inject pager
if (options.navContainer) {
$(settings.navContainer).append($pager);
} else {
$this.after($pager);
}
}
// Manual pager controls
if (settings.manualControls) {
$pager = $(settings.manualControls);
$pager.addClass(namespace + "_tabs " + namespaceIdx + "_tabs");
}
// Add pager slide class prefixes
if (settings.pager || settings.manualControls) {
$pager.find('li').each(function(i) {
$(this).addClass(slideClassPrefix + (i + 1));
});
}
// If we have a pager, we need to set up the selectTab function
if (settings.pager || settings.manualControls) {
$tabs = $pager.find('a');
// Select pager item
selectTab = function(idx) {
$tabs
.closest("li")
.removeClass(activeClass)
.eq(idx)
.addClass(activeClass);
};
}
// Auto cycle
if (settings.auto) {
startCycle = function() {
rotate = setInterval(function() {
// Clear the event queue
$slide.stop(true, true);
var idx = index + 1 < length ? index + 1 : 0;
// Remove active state and set new if pager is set
if (settings.pager || settings.manualControls) {
selectTab(idx);
}
slideTo(idx);
}, waitTime);
};
// Init cycle
startCycle();
}
// Restarting cycle
restartCycle = function() {
if (settings.auto) {
// Stop
clearInterval(rotate);
// Restart
startCycle();
}
};
// Pause on hover
if (settings.pause) {
$this.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
// Pager click event handler
if (settings.pager || settings.manualControls) {
$tabs.bind("click", function(e) {
e.preventDefault();
if (!settings.pauseControls) {
restartCycle();
}
// Get index of clicked tab
var idx = $tabs.index(this);
// Break if element is already active or currently animated
if (index === idx || $("." + visibleClass).queue('fx').length) {
return;
}
// Remove active state from old tab and set new one
selectTab(idx);
// Do the animation
slideTo(idx);
})
.eq(0)
.closest("li")
.addClass(activeClass);
// Pause when hovering pager
if (settings.pauseControls) {
$tabs.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
}
// Navigation
if (settings.nav) {
var navMarkup =
"<a href='#' class='" + navClass + " prev'>" + settings.prevText + "</a>" +
"<a href='#' class='" + navClass + " next'>" + settings.nextText + "</a>";
// Inject navigation
if (options.navContainer) {
$(settings.navContainer).append(navMarkup);
} else {
$this.after(navMarkup);
}
var $trigger = $("." + namespaceIdx + "_nav"),
$prev = $trigger.filter(".prev");
// Click event handler
$trigger.bind("click", function(e) {
e.preventDefault();
var $visibleClass = $("." + visibleClass);
// Prevent clicking if currently animated
if ($visibleClass.queue('fx').length) {
return;
}
// Adds active class during slide animation
// $(this)
// .addClass(namespace + "_active")
// .delay(fadeTime)
// .queue(function (next) {
// $(this).removeClass(namespace + "_active");
// next();
// });
// Determine where to slide
var idx = $slide.index($visibleClass),
prevIdx = idx - 1,
nextIdx = idx + 1 < length ? index + 1 : 0;
// Go to slide
slideTo($(this)[0] === $prev[0] ? prevIdx : nextIdx);
if (settings.pager || settings.manualControls) {
selectTab($(this)[0] === $prev[0] ? prevIdx : nextIdx);
}
if (!settings.pauseControls) {
restartCycle();
}
});
// Pause when hovering navigation
if (settings.pauseControls) {
$trigger.hover(function() {
clearInterval(rotate);
}, function() {
restartCycle();
});
}
}
}
// Max-width fallback
if (typeof document.body.style.maxWidth === "undefined" && options.maxwidth) {
var widthSupport = function() {
$this.css("width", "100%");
if ($this.width() > maxw) {
$this.css("width", maxw);
}
};
// Init fallback
widthSupport();
$(window).bind("resize", function() {
widthSupport();
});
}
});
};
})(jQuery, this, 0);
CSS:
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
.rslides1_nav {
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
z-index: 99;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.rslides1_nav:active {
opacity: 1.0;
}
.rslides1_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.rslides1_nav:focus {
outline: none;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
a {
color: #fff;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 10;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
top: 0;
left: 0;
display: block;
background: #fff;
/* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0, 0, 0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
box-shadow: inset 0 0 2px 0 rgba(0, 0, 0, .3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0, 0, 0, .8);
}
I believe your problem is in this line under .rslides1_nav:
background: transparent url("themes.gif") no-repeat left top;
Try:
background: transparent url("http://responsiveslides.com/with-captions/themes.gif") no-repeat left top;
Or copy that image to your local and use whatever link would be appropriate. I've been messing around with a fiddle, but it doesn't look quire right yet. Hopefully, this can at least get you started
You need to add the responsiveslides.css and theme.css. After that you can download the image with the arrows from here. Or you can just change the background images path of .centered-btns_nav with the path from this link.
You can get the responsiveslides.css file from here.
You can get the theme.css file from here.
You also have to change the namespace property value from the plugin initialization to be:
namespace: "centered-btns"
See the working snippet below:
$(function() {
$(".rslides").responsiveSlides({
auto: true,
pager: false,
nav: true,
speed: 500,
namespace: "centered-btns"
});
});
http://responsiveslides.com/themes/themes.gif
/*! http://responsiveslides.com v1.54 by #viljamis */
.rslides {
position: relative;
list-style: none;
overflow: hidden;
width: 100%;
padding: 0;
margin: 0;
}
.rslides li {
-webkit-backface-visibility: hidden;
position: absolute;
display: none;
width: 100%;
left: 0;
top: 0;
}
.rslides li:first-child {
position: relative;
display: block;
float: left;
}
.rslides img {
display: block;
height: auto;
float: left;
width: 100%;
border: 0;
}
* {
margin: 0;
padding: 0;
}
html {
background: #fff;
}
body {
color: #333;
font: 14px/24px sans-serif;
margin: 0 auto;
max-width: 700px;
_width: 700px;
padding: 0 30px;
text-align: center;
-webkit-font-smoothing: antialiased;
}
#wrapper {
float: left;
width: 100%;
margin-bottom: 50px;
}
h1 {
font: 600 28px/36px sans-serif;
margin: 50px 0;
}
h3 {
font: 600 18px/24px sans-serif;
color: #999;
margin: 0 0 20px;
}
a {
color: #222;
}
.rslides {
margin: 0 auto;
}
.rslides_container {
margin-bottom: 50px;
position: relative;
float: left;
width: 100%;
}
.centered-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 50%;
left: 0;
opacity: 0.7;
text-indent: -9999px;
overflow: hidden;
text-decoration: none;
height: 61px;
width: 38px;
background: transparent url("http://responsiveslides.com/themes/themes.gif") no-repeat left top;
margin-top: -45px;
}
.centered-btns_nav:active {
opacity: 1.0;
}
.centered-btns_nav.next {
left: auto;
background-position: right top;
right: 0;
}
.transparent-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
top: 0;
left: 0;
display: block;
background: #fff; /* Fix for IE6-9 */
opacity: 0;
filter: alpha(opacity=1);
width: 48%;
text-indent: -9999px;
overflow: hidden;
height: 91%;
}
.transparent-btns_nav.next {
left: auto;
right: 0;
}
.large-btns_nav {
z-index: 3;
position: absolute;
-webkit-tap-highlight-color: rgba(0,0,0,0);
opacity: 0.6;
text-indent: -9999px;
overflow: hidden;
top: 0;
bottom: 0;
left: 0;
background: #000 url("http://responsiveslides.com/themes/themes.gif") no-repeat left 50%;
width: 38px;
}
.large-btns_nav:active {
opacity: 1.0;
}
.large-btns_nav.next {
left: auto;
background-position: right 50%;
right: 0;
}
.centered-btns_nav:focus,
.transparent-btns_nav:focus,
.large-btns_nav:focus {
outline: none;
}
.centered-btns_tabs,
.transparent-btns_tabs,
.large-btns_tabs {
margin-top: 10px;
text-align: center;
}
.centered-btns_tabs li,
.transparent-btns_tabs li,
.large-btns_tabs li {
display: inline;
float: none;
_float: left;
*float: left;
margin-right: 5px;
}
.centered-btns_tabs a,
.transparent-btns_tabs a,
.large-btns_tabs a {
text-indent: -9999px;
overflow: hidden;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
background: #ccc;
background: rgba(0,0,0, .2);
display: inline-block;
_display: block;
*display: block;
-webkit-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
-moz-box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
box-shadow: inset 0 0 2px 0 rgba(0,0,0,.3);
width: 9px;
height: 9px;
}
.centered-btns_here a,
.transparent-btns_here a,
.large-btns_here a {
background: #222;
background: rgba(0,0,0, .8);
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.css" rel="stylesheet" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ResponsiveSlides.js/1.53/responsiveslides.min.js"></script>
<div class="rslides_container">
<ul class="rslides rslides1 centered-btns centered-btns1">
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
<li>
<img src="http://cdnparap110.paragonrels.com/ParagonImages/Property/P11/VALLEYMLS/480490/0/0/0/f479a2d775fa69c1118b25a3c2c8ecab/2/52ab9841b1e470e3517c5cdc93691ff5/480490.JPG" alt=''>
</li>
</ul>
</div>