Accordian Slider

Community Forums Forums Design Tips and Tricks Accordian Slider

This topic is: resolved

This topic contains 1 reply, has 2 voices, and was last updated by  Susan 1 year, 1 month ago.

Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #115473


    If anybody out there can help with this I would greatly appreciate it. So I’ve got some code to add that will create an accordion type slider. The html is:

    <!DOCTYPE html>
    <!–[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]–>
    <!–[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]–>
    <!–[if IE 8]>         <html class="no-js lt-ie9"> <![endif]–>
    <!–[if gt IE 8]><!–> <html class="no-js"> <!–<![endif]–><head>
            <meta charset="utf-8">
            <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width">
            <link rel="stylesheet" href="_css/main.css">
        <div class="accordian">
                        <div class="image_title">
                            <a href="#">IMG 1</a>
                        <a href="#">
                            <img src="_img/mountain_1.jpg" />
                        <div class="image_title">
                            <a href="#">IMG 2</a>
                        <a href="#">
                            <img src="_img/mountain_2.jpg" />
                        <div class="image_title">
                            <a href="#">IMG 3</a>
                        <a href="#">
                            <img src="_img/mountain_3.jpg" />

    AND the CSS is this:

    /*Now the styles*/
    * {
    	margin: 0; 
    	padding: 0;
    body {
    	background: #ccc; 
    	font-family: arial, verdana, tahoma;
    /*Time to apply widths for accordian to work
    Width of image = 640px
    total images = 5
    so width of hovered image = 640px
    width of un-hovered image = 40px – you can set this to anything
    so total container width = 640 + 40*4 = 800px;
    default width = 800/5 = 160px;
    .accordian {
    	width: 805px; height: 320px;
    	overflow: hidden;
    	/*Time for some styling*/
    	margin: 100px auto;
    	box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    	-webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    	-moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    /*A small hack to prevent flickering on some browsers*/
    .accordian ul {
    	width: 2000px;
    	/*This will give ample space to the last item to move
    	instead of falling down/flickering during hovers.*/
    .accordian li {
    	position: relative;
    	display: block;
    	width: 160px;
    	float: left;
    	border-left: 1px solid #888;
    	box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    	-webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    	-moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    	/*Transitions to give animation effect*/
    	transition: all 0.5s;
    	-webkit-transition: all 0.5s;
    	-moz-transition: all 0.5s;
    	/*If you hover on the images now you should be able to 
    	see the basic accordian*/
    /*Reduce with of un-hovered elements*/
    .accordian ul:hover li {width: 40px;}
    /*Lets apply hover effects now*/
    /*The LI hover style should override the UL hover style*/
    .accordian ul li:hover {width: 640px;}
    .accordian li img {
    	display: block;
    /*Image title styles*/
    .image_title {
    	background: rgba(0, 0, 0, 0.5);
    	position: absolute;
    	left: 0; bottom: 0;	
    width: 640px;	
    .image_title a {
    	display: block;
    	color: #fff;
    	text-decoration: none;
    	padding: 20px;
    	font-size: 16px;

    I put the html into the simple hooks plugin under the header and then added the css to the main stylesheet but something went wrong. Slideshow

    Any ideas? GREATLY appreciated.



    Closing this, as you have marked it as “resolved”. Go ahead and create a new post if you are still having issues.

    Susan @ Graphically Designing I offer theme customizations I tweet!
    I’ve taken up the challenge! – help me answer some of the unanswered posts

Viewing 2 posts - 1 through 2 (of 2 total)

The topic ‘Accordian Slider’ is closed to new replies.