Re: How to create a 3D rotating Image carousel?
Posted: Wed Oct 09, 2019 2:12 pm
Marcus
I can help you - How do I contact you directly ?
I can help you - How do I contact you directly ?
WYSIWYG Web Builder
http://forum.wysiwygwebbuilder.com/
Code: Select all
<!-- MyFlipster BEG -->
<div class="myFlipster">
<ul>
<li id="myFlipsterItem1" data-audio-file="audio/Music1" data-song-text="Production: abc / Role: xyz" data-flip-title="1.png"><a href="javascript: void();" target=""><img src="images/1.png" alt="1.png" title="1.png" /></a></li>
<li id="myFlipsterItem2" data-audio-file="audio/Music2" data-song-text="Production: xyz / Role: abc" data-flip-title="2.png"><a href="javascript: void();" target=""><img src="images/2.png" alt="2.png" title="2.png" /></a></li>
<li id="myFlipsterItem3" data-audio-file="audio/Music3" data-song-text="Production: abc / Role: xyz" data-flip-title="3.png"><a href="javascript: void();" target=""><img src="images/3.png" alt="3.png" title="3.png" /></a></li>
<li id="myFlipsterItem4" data-audio-file="audio/Music4" data-song-text="Production: xyz / Role: abc" data-flip-title="4.png"><a href="javascript: void();" target=""><img src="images/4.png" alt="4.png" title="4.png" /></a></li>
<li id="myFlipsterItem5" data-audio-file="audio/Music5" data-song-text="Production: abc / Role: xyz (no audiofile)" data-flip-title="5.png"><a href="javascript: void();" target=""><img src="images/5.png" alt="5.png" title="5.png" /></a></li>
<li id="myFlipsterItem6" data-audio-file="audio/Music6" data-song-text="Hörspiel 6, Rolle: Erzählerin" data-flip-title="6.png"><a href="javascript: void();" target=""><img src="images/6.png" alt="6.png" title="6.png" /></a></li>
</ul>
</div>
<div class = "myFlipster-PlayContainer">
<div class = "myFlipster-ContainerCell" id = "myFlipster-Text">Hallo Welt</div>
<div class = "myFlipster-ContainerCellButton"><img id = "myFlipster-PlayButton" src="myflipster/play_normal.png" alt="Play-Button" onmouseover="setButton(1)"; onmouseleave="setButton(0);" onclick="togglePlay();"></div>
</div>
<audio id="myFlipster-Player" preload oncanplaythrough = "playerReady()" onended = "playerReady()"; onabort = "playerError()">
<source id = "myFlipster-Player-Source-mp3" src = "" type="audio/mpeg">
<source id = "myFlipster-Player-Source-ogg" src = "" type="audio/ogg">
Ihr Browser unterstützt das HTML5 Audio-Element leider nicht.
</audio>
<script src="myflipster/jquery.flipster.min.js"></script>
<script src="myflipster/myflipster.audio.js"></script>
<!-- MyFlipster END -->
Code: Select all
myflipster/jquery.flipster.min.css
myflipster/myflipster.css
Code: Select all
.myFlipster-PlayContainer
{
display: inline-grid;
grid-template-columns: auto;
// background-color: #ffffff44;
// border: 1px solid #ffffffff;
position: relative;
top: -35px;
left: 15px;
width: 350px;
padding: 3px;
}
.myFlipster-ContainerCell
{
// border: 1px solid #ff000044;
top: -50em;
height: 35px;
text-align: center;
color: #ffffaaff;
font-family: Arial;
font-weight: normal;
font-size: 16px;
}
.myFlipster-ContainerCellButton
{
// border: 1px solid #00ff0044;
text-align: center;
}
Code: Select all
$('.myFlipster').flipster({
itemContainer: 'ul',
// [string|object]
// Selector for the container of the flippin' items.
itemSelector: 'li',
// [string|object]
// Selector for children of `itemContainer` to flip
start: 'center',
// ['center'|number]
// Zero based index of the starting item, or use 'center' to start in the middle
fadeIn: 250,
// [milliseconds]
// Speed of the fade in animation after items have been setup
loop: true,
// [true|false]
// Loop around when the start or end is reached
autoplay: false,
// [false|milliseconds]
// If a positive number, Flipster will automatically advance to next item after that number of milliseconds
pauseOnHover: true,
// [true|false]
// If true, autoplay advancement will pause when Flipster is hovered
style: 'coverflow',
// [coverflow|carousel|flat|...]
// Adds a class (e.g. flipster--coverflow) to the flipster element to switch between display styles
// Create your own theme in CSS and use this setting to have Flipster add the custom class
spacing: -0.6,
// [number]
// Space between items relative to each item's width. 0 for no spacing, negative values to overlap
click: true,
// [true|false]
// Clicking an item switches to that item
keyboard: false,
// [true|false]
// Enable left/right arrow navigation
scrollwheel: false,
// [true|false]
// Enable mousewheel/trackpad navigation; up/left = previous, down/right = next
touch: true,
// [true|false]
// Enable swipe navigation for touch devices
nav: true,
// [true|false|'before'|'after']
// If not false, Flipster will build an unordered list of the items
// Values true or 'before' will insert the navigation before the items, 'after' will append the navigation after the items
buttons: false,
// [true|false|'custom']
// If true, Flipster will insert Previous / Next buttons with SVG arrows
// If 'custom', Flipster will not insert the arrows and will instead use the values of `buttonPrev` and `buttonNext`
buttonPrev: 'Previous',
// [text|html]
// Changes the text for the Previous button
buttonNext: 'Next',
// [text|html]
// Changes the text for the Next button
onItemSwitch: itemSwitched
// [function]
// Callback function when items are switched
// Arguments received: [currentItem, previousItem]
});
var AudioPlayer = document.getElementById("myFlipster-Player");
var AudioPlayerMp3 = document.getElementById("myFlipster-Player-Source-mp3");
var AudioPlayerOgg = document.getElementById("myFlipster-Player-Source-ogg");
var PlayButton = document.getElementById("myFlipster-PlayButton");
var Text = document.getElementById("myFlipster-Text");
var Song;
var OldSong;
var SongText;
itemSwitched(document.getElementById("myFlipsterItem4"), "0");
function itemSwitched(a, b) {
Song = a.getAttribute("data-audio-file");
SongText = a.getAttribute("data-song-text");
AudioPlayerMp3.src = Song + ".mp3";
AudioPlayerOgg.src = Song + ".ogg";
AudioPlayer.load();
Text.innerHTML = SongText;
}
function togglePlay() {
if (AudioPlayer.paused == true) {
AudioPlayer.play();
} else {
AudioPlayer.pause();
}
setButton(1);
}
function playerReady() {
setButton(0);
}
function playerError() {
setTimeout(function() {
setButton(0);
}, 50);
}
function setButton(hover) {
if (AudioPlayer.networkState == 3) {
PlayButton.src="myFlipster/play_none.png";
} else {
if (AudioPlayer.paused == true) {
(hover == 0) ? PlayButton.src="myFlipster/play_normal.png" : PlayButton.src="myFlipster/play_hover.png";
} else {
(hover == 0) ? PlayButton.src="myFlipster/pause_normal.png" : PlayButton.src="myFlipster/pause_hover.png";
}
}
}