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 6 months, 3 weeks ago.

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

    jenglish647
    Participant

    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">
            <title></title>
            <meta name="description" content="">
            <meta name="viewport" content="width=device-width">
            <link rel="stylesheet" href="_css/main.css">
        </head>
            
        <div class="accordian">
                <ul>
                    <li>
                        <div class="image_title">
                            <a href="#">IMG 1</a>
                        </div>
                        <a href="#">
                            <img src="_img/mountain_1.jpg" />
                        </a>
                    </li>
                    <li>
                        <div class="image_title">
                            <a href="#">IMG 2</a>
                        </div>
                        <a href="#">
                            <img src="_img/mountain_2.jpg" />
                        </a>
                    </li>
                    <li>
                        <div class="image_title">
                            <a href="#">IMG 3</a>
                        </div>
                        <a href="#">
                            <img src="_img/mountain_3.jpg" />
                        </a>
                    </li>
                </ul>
            </div>
        </body>
    </html>

    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.

    #118077

    Susan
    Moderator

    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.