Rich-text Reply
Highlighted

Change image in carousel on PIP

AJikea 2w ago
Accepted Solution

Change image in carousel on PIP

Hi 

 

I would like to change the picture in the carousel on our PIP (https://m2.ikea.com/dk/da/p/ekedalen-bord-med-tillaegsplader-hvid-70340807/)

 

I have tried changing in the code and changing the pictures via the visual editor. But nothing works. Most of the time the carousel just breaks in some way. 

 

Here is the code where i would like to change the pictures:

 

<div class="carousel-component js-slider slider__1 slider__2 slider__3 slider__4 slider__5 slider__6 slider__7">

<div class="carousel-wrapper">
<div class="carousel" id="pip-carousel">
<div class="carousel-inner no-js">
<div class="carousel__image-container" aria-live="assertive">
<div class="carousel__image" aria-hidden="false">
<img src="https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xxxs 240w" class="" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</div>
<div class="carousel__image" aria-hidden="true">
<img src="https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xxxs 240w" class="" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</div>
<div class="carousel__image" aria-hidden="true">
<img src="https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xxxs 240w" class="" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</div>
<div class="carousel__image" aria-hidden="true">
<img src="https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xxxs 240w" class="" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</div>
<div class="carousel__image" aria-hidden="true">
<img src="https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xxxs 240w" class="" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</div>
<div class="carousel__image" aria-hidden="true">
<img src="https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xxxs 240w" class="" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</div>
<div class="carousel__image" aria-hidden="true">
<img src="https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xxxs 240w" class="" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</div>
<div class="carousel__image" aria-hidden="true">
<img src="https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xxxs 240w" class="" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</div>
</div>
<iframe id="pipvideo" frameborder="0" width="560px" height="315px" style="width:100%;height:100%;display:none;position:absolute;top:0;left:0;" allowfullscreen="" src="https://mmapi.ikea.com/embed/?item_number=70340807&amp;jsapi=1&amp;is_mobile=true"></iframe>
</div>
</div>
<div class="carousel-arrows" aria-label="carousel buttons" aria-controls="pip-carousel">
<div class="carousel-arrow-container">
<button class="carousel-arrow carousel-arrow--left carousel-arrow--disabled" type="button" data-direction="left" aria-label="Vis tidligere billede" disabled="">
</button>
</div>
<div class="carousel-arrow-container">
<button class="carousel-arrow carousel-arrow--right" type="button" data-direction="right" aria-label="Se næste billede">
</button>
</div>
</div>
</div>
<ul class="carousel-bullets">
<li class="carousel-bullets__bullet carousel-bullets__bullet--active">
<button class="bullet-clickable" type="button" data-target="0" aria-controls="pip-carousel" aria-label="Se billede 1">
<img src="https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516748_PE640525_S5.JPG?f=xxxs 240w" class="carousel-bullets__bullet__image" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</button>
</li>
<li class="carousel-bullets__bullet">
<button class="bullet-clickable" type="button" data-target="1" aria-controls="pip-carousel" aria-label="Se billede 2">
<img src="https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516749_PE640527_S5.JPG?f=xxxs 240w" class="carousel-bullets__bullet__image" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</button>
</li>
<li class="carousel-bullets__bullet">
<button class="bullet-clickable" type="button" data-target="2" aria-controls="pip-carousel" aria-label="Se billede 3">
<img src="https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516754_PE640528_S5.JPG?f=xxxs 240w" class="carousel-bullets__bullet__image" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</button>
</li>
<li class="carousel-bullets__bullet">
<button class="bullet-clickable" type="button" data-target="3" aria-controls="pip-carousel" aria-label="Se billede 4">
<img src="https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516750_PE640526_S5.JPG?f=xxxs 240w" class="carousel-bullets__bullet__image" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</button>
</li>
<li class="carousel-bullets__bullet">
<button class="bullet-clickable" type="button" data-target="4" aria-controls="pip-carousel" aria-label="Se billede 5">
<img src="https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0516676_PE640493_S5.JPG?f=xxxs 240w" class="carousel-bullets__bullet__image" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</button>
</li>
<li class="carousel-bullets__bullet">
<button class="bullet-clickable" type="button" data-target="5" aria-controls="pip-carousel" aria-label="Se billede 6">
<img src="https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0630540_PH144970_S5.JPG?f=xxxs 240w" class="carousel-bullets__bullet__image" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</button>
</li>
<li class="carousel-bullets__bullet">
<button class="bullet-clickable" type="button" data-target="6" aria-controls="pip-carousel" aria-label="Se billede 7">
<img src="https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0630539_PH149763_S5.JPG?f=xxxs 240w" class="carousel-bullets__bullet__image" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</button>
</li>
<li class="carousel-bullets__bullet">
<button class="bullet-clickable" type="button" data-target="7" aria-controls="pip-carousel" aria-label="Se billede 8">
<img src="https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=s" srcset="https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xxxl 1400w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xxl 950w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xl 800w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=l 750w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=m 600w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=s 500w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xs 400w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xxs 300w,
https://m2.ikea.com/PIAimages/0673798_PH152708_S5.JPG?f=xxxs 240w" class="carousel-bullets__bullet__image" sizes="50vw" alt="IKEA EKEDALEN Bord med tillægsplader">

</button>
</li>
<li class="carousel-bullets__bullet btnpipvideo" style="background-size: 100% 100% !important;background-image:url('https://mmapi.ikea.com/images/81/8e/818e3bed-f8f2-44d1-b3c5-a4242e28fd49/me000045_195x108_00h.00m.01...')">
<button class="bullet-clickable" type="button"><img src="https://mmapi.ikea.com/player/ikea/img-btn/play_60px_2x.png" style="width:80%;height:80%;top:10%;left:10%;border:none;position:absolute;" class="carousel-bullets__bullet__image" sizes="50vw" alt=""></button>
</li>
</ul>
</div>

 

 

Hope someone can help. 

 

Br

Anders

Level 2

Re: Change image in carousel on PIP

Hi,

i suppose it is a timing problem. Your carousel is set up via some javascript function. Using the visual editor you rely on a already completed page including all js-manipulations. If your variation code is executed too early, there is nothing to modify.

Regarding the page, which activation mode is set?
Kind regards

Michael


   
AJikea 2w ago
 

Re: Change image in carousel on PIP

Thanks for your reply Michael

The activation mode is set to default (so it runs immediate).

But the carousel already breaks in the editor when i make changes. On of the things that happens is that the connection between the thumbnail and the picture in the carousel doesn't match. And if try to remove or hide a picture the carousel doesnt adjust to the removed image.

Best regards
Anders
Level 2

Re: Change image in carousel on PIP

Ok,

 

so, to pass by the timing problem and to remove an image you may use direct css. To remove the image with id: imageThumb_4 add 

#imageThumb_4
{
  display:none !important;
}

in the css-tab of the code-editor.

 

This will work if it is not the first image in your carousel.

 

The other options, removing the first one or changing the images will depend on timing. If there is no event fired, you may have a look at the existence on elements with class "imageThumb". Without further investigation they might be a valid indicator that your carousel is there.

 

Does this help or do you need more help? 

Kind regards

Michael


   
AJikea 2w ago
 

Re: Change image in carousel on PIP

I can see that i need to add an id myself to the picture i want to remove/hide. Then i can use the direct css. But the carousel breaks, so i cant use the arrow to change picture nor click on an thumbnail and change the picture.

 

And if i want to change the picture by direct css all my pictures seems to have the same class and no id. 

 

Br

Anders 

Level 2

Re: Change image in carousel on PIP

Ok,

 

if i understand the basic code of your PIP right, there is a lot of javascript-variables, which are used to set up your carousel. My best advice is to talk to your developers in order to modify those variables and to restart the set up of your carousel. That is the most safe way. By this, you can remove, add or change images.

 

All other ways will only be workarounds, which you should use, if there is no developer support ( removing elements and modifying ids and stuff)

Kind regards

Michael


   
AJikea 2w ago
 

Re: Change image in carousel on PIP

I think your are right. It will be the best way to solve it. 

 

I will get i contact with them. 

 

Thanks for the help. 

 

Best regards

Anders

Level 2