I have the following variables. I want to pass cgggowl_slidesPerView to the Swiper configuration. How can I do that?
var cggowl_jav_info_cont = $scope.find('.cggowl-row').eq(0);
var cgggowl_settings = cggowl_jav_info_cont.data('settings');
var cgggowl_slidesPerView = cgggowl_settings['slidesPerView'];
var mySwiper = new Swiper('.swiper-container', {
slidesPerView: cgggowl_slidesPerView,
spaceBetween: cgggowl_spaceBetween,
});
Related
How to make it so that the progress bar with the progress line and the numeric display of the active slide from the total number of slides are displayed simultaneously?
Since by default the simultaneous operation of the progress bar and pagination with a fraction is impossible, I added "type: 'progressbar'" in the "pagination" properties, and for the numeric display of slides I made an .image-slider__fraction block in which I placed all the elements.
Then I wrote java script code that I found on the Internet, but I get an error "Uncaught ReferenceError: myImageSLider is not defined". Why?
Site ilyin1ib.beget.tech
Code https://jsfiddle.net/qav8z7f3/
let mySliderAllSlides = document.querySelector('.image-slider__total');
let mySliderCurrentSlide = document.querySelector('.image-slider__current');
mySliderAllSlides.innerHTML = myImageSLider.slides.length;
myImageSLider.on('slideChange', function() {
let currentSlide = ++myImageSLider.realIndex;
mySliderCurrentSlide.innerHTML = currentSlide;
});
<div class="image-slider__fraction">
<div class="image-slider__current">1</div>
<div class="image-slider__sepparator">/</div>
<div class="image-slider__total">1</div>
</div>
use slideChange event. The script does not give the actual number of items because you used the loop inside the slider. That's why I found the value of the items before creating the slider script.
var totalSlide = $('.image-slider .swiper-slide').length;
const swiper = new Swiper('.image-slider', {
// Optional parameters
slidesPerView: 3,
spaceBetween: 30,
centeredSlides: true,
loop: true,
loopedSLides: 3,
simulateTouch: true,
grabCursor: true,
speed: 800,
pagination: {
el: '.swiper-pagination',
type: 'progressbar'
},
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
autoplay: {
delay: 1000,
}
});
//var count = $('.image-slider .image-slider__slide').length;
swiper.on('slideChange', function() {
var fragment = document.querySelector('.image-slider__current');
var current = swiper.realIndex + 1;
if (current > totalSlide)
current = 1;
var idx = current < 10 ? ("0" + current) : current;
var tdx = totalSlide < 10 ? ("0" + totalSlide) : totalSlide;
fragment.innerHTML = (idx + '/' + tdx);
});
demo in jsfiddle
How can I pause/stop the vehicle moving entity (to stop the vehicle from the moving) by calling another function? Cannot seem to use viewModel.pauseViewModel.command();. Appreciate if anyone can demonstrate how to provide a pause & continue for moving entity.
function togglesimulation() {
Cesium.Math.setRandomNumberSeed(3);
var start = Cesium.JulianDate.fromDate(new Date(2021, 6, 29, 16));
var stop = Cesium.JulianDate.addSeconds(start, 300, new Cesium.JulianDate);
//Make sure viewer is at the desired time.
var clock = new Cesium.Clock();
viewer.clock.startTime = start.clone();
viewer.clock.stopTime = stop.clone();
viewer.clock.currentTime = start.clone();
viewer.clock.clockRange = Cesium.ClockRange.CLAMPED; // stop at the end
viewer.clock.multiplier = clockmultiplier;
viewer.clock.shouldAnimate = true;
var position = new Cesium.SampledPositionProperty();
var time = Cesium.JulianDate.addSeconds(start, 120, new Cesium.JulianDate());
var timeStepInSeconds = 5;
var newPositions = mergedgeom1;
for (var i = 0; i < newPositions.length; i++) {
var poss = Cesium.Cartesian3.fromDegrees(parseFloat(newPositions[i][0]), parseFloat(newPositions[i][1])); //height
var time = Cesium.JulianDate.addSeconds(start, i * timeStepInSeconds, new Cesium.JulianDate());
position.addSample(time, poss);
}
var entity = viewer.entities.add({
availability: new Cesium.TimeIntervalCollection([
new Cesium.TimeInterval({
start: start,
stop: stop,
}),
]),
model: {
uri: "../asset/vehicle/CesiumMilkTruck/CesiumMilkTruck.glb",
minimumPixelSize: 64,
},
viewFrom: new Cesium.Cartesian3(-100.0, 0.0, 100.0),
position: position,
orientation: new Cesium.VelocityOrientationProperty(position),
});
viewer.trackedEntity = entity;
var scene = viewer.scene;
}
Pause the clock with:
viewer.clock.shouldAnimate = false;
You can un-pause later with:
viewer.clock.shouldAnimate = true;
I have 4 each functions which call a Swiper slider with the appropriate options. After those are appended to the correct div I then add the code which links them together, so one slider controls the other and vice versa.
I am getting the error "Uncaught ReferenceError: swiperV2 is not defined". I think this is because they are inside the each functions and this reference to them doesn't 'see' them.
Any ideas on how to fix this?
Thanks
$(".swiper-container-v").each(function(index, element) {
var $this = $(this);
$this.addClass("instance-" + index);
$this.find(".swiper-button-prev").addClass("btn-prev-" + index);
$this.find(".swiper-button-next").addClass("btn-next-" + index);
var swiperV = new Swiper(".swiper-container-v.instance-" + index, {
// your settings ...
pagination: '.swiper-pagination-v',
paginationClickable: true,
direction: 'vertical',
spaceBetween: 0,
mousewheelControl: false,
speed: 600,
nextButton: ".btn-next-" + index,
prevButton: ".btn-prev-" + index
});
});
$(".swiper-container-h").each(function(index, element) {
var $this = $(this);
$this.addClass("instance-" + index);
$this.find(".swiper-button-prev").addClass("btn-prev-" + index);
$this.find(".swiper-button-next").addClass("btn-next-" + index);
var swiperH = new Swiper(".swiper-container-h.instance-" + index, {
// your settings ...
pagination: '.swiper-pagination-h',
paginationClickable: true,
spaceBetween: 0,
parallax: true,
speed: 600,
nextButton: ".btn-next-" + index,
prevButton: ".btn-prev-" + index
});
});
$(".swiper-container-v2").each(function(index, element) {
var $this = $(this);
$this.addClass("instance-" + index);
$this.find(".swiper-button-prev").addClass("btn-prev-" + index);
$this.find(".swiper-button-next").addClass("btn-next-" + index);
var swiperV2 = new Swiper(".swiper-container-v2.instance-" + index, {
// your settings ...
paginationClickable: true,
direction: 'vertical',
spaceBetween: 0,
mousewheelControl: false,
speed: 600
});
});
$(".swiper-container-h2").each(function(index, element) {
var $this = $(this);
$this.addClass("instance-" + index);
$this.find(".swiper-button-prev").addClass("btn-prev-" + index);
$this.find(".swiper-button-next").addClass("btn-next-" + index);
var swiperH2 = new Swiper(".swiper-container-h2.instance-" + index, {
// your settings ...
paginationClickable: true,
spaceBetween: 0,
parallax: true,
speed: 600
});
});
swiperV2.params.control = swiperV;
swiperH2.params.control = swiperH;
swiperV.params.control = swiperV2;
swiperH.params.control = swiperH2;
Really.... this is just how scope works and is pretty much ubiquitous of all programming languages that are class/function based.
For you to be able to access variables that fall within the scope of a function, you must create a reference for it outside of that function in the scope that is expected to act upon it.
So in the case that you have something such as,
func() {
var myVar = ...
}
print(myVar)
This will not work as the global scope that exists outside of the functions scope has no concept of what myVar is.
So you'll need to first create a reference to that variable.
var myVar;
func() {
var myVar = ...
}
print(myVar)
Now since myVar was generated outside of the scope of the function, the function knows about myVar.
Alternatively you could return the value of myVar and do something like this.
func() {
return myVar = ...
}
var myFunc = func();
print(myFunc())
And you'll have essentially performed a function assignment (i.e., assigning that function to a variable) and that variable by proxy in this case is storing the return value of the function.
I am trying to make multiple animations on the same page. but I don't know how to create another variable. Here is the sample, from Codepen.
I tried creating another "imageFile = new Image()" naming it "imageFile2 = new Image() but it didn't seem to work.
I am very new in this. Please guide me. Thanks in advance.
var appHeight = 400,
appWidth = 1000,
appCenterX = appWidth/2,
appCenterY = appHeight/2,
stage = new Kinetic.Stage({
container: 'container',
width: appWidth,
height:appHeight
}),
layer = new Kinetic.Layer(),
imageFile = new Image(),
creature,
bezTween;
imageFile.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";
var creatureGroup = new Kinetic.Group();
creature = new Kinetic.Image({
image: imageFile,
width:27,
height:29,
x:-16,
y:-16
});
bezTween = new TweenMax(creatureGroup, 6, {
bezier:{
type:"soft",
values:[{setX:100, setY:250}, {setX:300, setY:0}, {setX:500, setY:400}, {setX:appWidth+20, setY:20}],
//autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
autoRotate:["setX", "setY", "setRotationDeg"]
},
ease:Linear.easeNone, autoCSS:false, repeat:10});
for (i = 0; i<200; i++){
bezTween.progress(i/200);
var circle = new Kinetic.Circle({
radius:2,
fill:'#333',
x:bezTween.target.getX(),
y:bezTween.target.getY()
});
layer.add(circle);
layer.draw();
bezTween.restart();
}
var creatureLayer = new Kinetic.Layer();
creatureGroup.add(creature);
creatureLayer.add(creatureGroup);
stage.add(layer);
stage.add(creatureLayer);
TweenLite.ticker.addEventListener("tick", redraw);
function redraw(){
creatureLayer.draw();
}
You can create second creature2.
var appHeight = 400,
appWidth = 1000,
appCenterX = appWidth/2,
appCenterY = appHeight/2,
stage = new Kinetic.Stage({
container: 'container',
width: appWidth,
height:appHeight
}),
layer = new Kinetic.Layer(),
imageFile = new Image(),
imageFile2 = new Image(),
creature,
creature2,
bezTween;
imageFile.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";
imageFile2.src = "http://www.greensock.com/_img/codepen/bezierCreature/creature_red.png";
var creatureGroup = new Kinetic.Group();
creature2 = new Kinetic.Image({
image: imageFile2,
width:50,
height:50,
x:20,
y:-16
});
Check Your Updated Codepen Here.
Edit:
Here i updated codepen with different path for another creature as you required.
I created another path there.
bezTween1 = new TweenMax(creatureGroup1, 6, {
bezier:{
type:"soft",
values:[{setX:150, setY:300}, {setX:350, setY:0}, {setX:550, setY:450}, {setX:appWidth+50, setY:50}],
//autoRotate needs to know how to adjust x/y/rotation so we pass in the names of the apporpriate KineticJS methods
autoRotate:["setX", "setY", "setRotationDeg"]
},
ease:Linear.easeNone, autoCSS:false, repeat:10});
Check Codepen Here.
I am trying to replace a JavaScript For Loop with the underscore.js each() function.
for (var x = 0; x < count; x++) {
slider[x].setAttribute('id', arguments[x]);
sliderPagination[x].setAttribute('id', arguments[x]+'Pagination');
// Initialise swiper
var slider = new Slider('#'+arguments[x], {
pagination: '#'+arguments[x]+'Pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
}
I am new to using underscore so not quite sure the best way to do this. Do I need the index iteration when using the _.each() function for this?
UPDATE:
// Function to initialize multiple instances of slider plugin
function loadSliders(values) {
var sliders = document.getElementsByClassName("swiper-container"),
slidersPaginations = document.getElementsByClassName("swiper-pagination"),
count = Math.min(sliders.length, arguments.length),
i = 0;
_.each(sliders, function(sliders, index) {
var argumentsVariable = values[index];
sliders.setAttribute('id', argumentsVariable);
slidersPaginations[index].setAttribute('id', argumentsVariable+'Pagination');
// Initialise swiper
var slider = new Swiper('#'+argumentsVariable, {
pagination: '#'+argumentsVariable+'Pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
});
}
I'm assuming here that you have 3 arrays:
- sliders
- sliderPaginations
- arguments
Then, you can do it that way:
_.each(sliders, function(slider, index) {
var argumentsVariable = arguments[index];
slider.setAttribute('id', argumentsVariable);
sliderPaginations[index].setAttribute('id', argumentsVariable+'Pagination');
// Initialise swiper
var slider = new Slider('#'+argumentsVariable, {
pagination: '#'+argumentsVariable+'Pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
}
Note that you can use EcmaScript5 forEach method that is defined for each array:
sliders.forEach(function(slider, index) {
var argumentsVariable = arguments[index];
slider.setAttribute('id', argumentsVariable);
sliderPagination.setAttribute('id', argumentsVariable+'Pagination');
// Initialise swiper
var slider = new Slider('#'+argumentsVariable, {
pagination: '#'+argumentsVariable+'Pagination',
loop:true,
grabCursor: true,
paginationClickable: true
})
}