search

KevinBatdorf / liquidslider

A Responsive jQuery Content Slider
161 stars 63 forks source link

changing the wrap / tab-width #117

Closed wini2 closed 9 years ago

wini2 commented 10 years ago

hello, i want to customize the liquidslider in order to look and behave like the one on the screenschot (trendico-edv.de). slider-navigation with your help i adjusted the luiquidslider to show the tabs at the bottom and not to include the title. there are two issuse i can't find a solution. 1st: is it possible to change the wrap of the tab-text? as far as i see, the rendering is done by the title-class. if possible i'd like to use something like h2 class="title" Training /h2 p here ist some other text - shown beneath the title....../p

2nd: is it possible that each tab has the same width? the tabs are obviously created by js (can'f see it in demo.html) - so i don't find a place to add a div or someting else.

thanks for your help

wini2 commented 10 years ago

it seems that in the meantime i found a solution. i will post the code after testing.

i overestimated myself. after i thought i got it, i recognized that it don't work with responsive version, because the title-lenghts blows up the tab.

i guess there is no way to fit liquidslider to my needs without altering js. maybe somebody could give a hint how to insert an additional text beneath the title.

thanks

thielpeter commented 10 years ago

have you tried dynamicTabsHtml ?

wini2 commented 10 years ago

hi alsahh,

yes, it seems to be the default.

    dynamicTabs: true,
    dynamicTabsHtml: true,
thielpeter commented 10 years ago

So whats the problem to add html for tabtitle?

wini2 commented 10 years ago

h2 class="title"Training » Sie möchten Ihre Rechner und Programme optimal nutzen, benötigen ein individuelles Coaching persönlich und/oder über eine Lernplattform? /h2 img src="img/training.jpg" height="368" alt=""

leads to liquidslider-screenshot2 (in fullscreen) - probably because the text is longer than the width of the whole slider. by the way

by the way - obviously the js doesn't allow linebreaks within the tab-text.

thielpeter commented 10 years ago

did you tried to wrap it further ? please post your title markup before and after init of liquidslider

wini2 commented 10 years ago

thanks for your patient help. i tried different wraps - without success. here ist my complete html. is the wohle sourcecode from github (not a custom.min-build version). i only changed 

<!DOCTYPE html>
<html lang="en-us">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge;chrome=1" />
<meta name="description" content="Liquid Slider : A JQuery Slider Plugin" />

<!-- You may want to "minify" these after making edits http://www.refresh-sf.com/yui/ -->
<link rel="stylesheet" href="./css/animate.css"> <!-- Optional -->
<link rel="stylesheet" href="./css/liquid-slider-original.css">

<!-- Liquid Slider relies on jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<!-- More scripts below! -->

<title>Liquid Slider 2</title>
</head>
<h1 style="margin:100px 200px">Liquid Slider 2</h1>
<div class="liquid-slider" id="main-slider">
<div>
<h2 class="title">Training<span>Sie wünschen IT-Lösungen, die auf Ihr Unternehmen und Ihre Bedürfnisse zugeschnitten sind und die Ihren Arbeitsalltag erleichtern?</span></h2>
<img src="img/training.jpg" height="368" alt="">
</div>
<div>
<h2 class="title">Entwicklung</h2><span>Sie wünschen IT-Lösungen, die auf Ihr Unternehmen und Ihre Bedürfnisse zugeschnitten sind und die Ihren Arbeitsalltag erleichtern?</span>
<img src="img/training_v1.jpg" height="368" alt="">
</div>
<div>
<h2 class="title">Dienstleistungen</h2><span>Sie möchten wissen, welche Hardware Sie benötigen, wie sie instand gehalten wird und wie Sie Ihre Daten sichern?</span>
<img src="img/dienstleistung.jpg" height="368" alt="">
</div>
<div>
<h2 class="title">Consulting</h2><span>Sie wünschen einen Partner, der Sie in IT-Fragen kompetent berät, Ihre internen Abläufe versteht und Prozesse optimiert?</span>
<img src="img/consulting.jpg" height="368" alt="">
</div>
</div>

<!-- Feel free to load scripts in the footer -->
<script src="./js/jquery.easing.1.3.js"></script>
<script src="./js/jquery.touchSwipe.min.js"></script>
<script src="./js/jquery.liquid-slider-github.js"></script>
<script>
$('#main-slider').liquidSlider();

/* If you need to access the internal property or methods, use this:
var api = $.data( $('#slider-id')[0], 'liquidSlider');
*/
</script>

</body>
</html>

because of my debugging, i also use the original css again.

KevinBatdorf commented 10 years ago

It's probably just some css styling that you need to work out. But you could also try using the crossLink feature too.