Okay
  Public Ticket #244648
How you will go to make a phone only Slider?
Closed

Comments

  • Patrick started the conversation

    I want to make a slider style for desktop & Tablet and a completly different one for phone in the same Joomla position.

    I can easily hide the desktop/tablet for the phone and do the same for phone version and hide it to the desktop/tablet.

    My question is more about the phone (I will target all type of iPhone) 

    1 — Do you have some hint about  doing something like that ?

    2— Can I insert videos

    3— Do I have to treat the graphics differently for them to be nice on Retina devices.

    I ask you that because I’m using your navigation style “Round” fot the bullets of the slide show and they look really pixelized on Retina.

  • Patrick replied

    I try all kind of number for  :

    Slider Layout: — I hesitate to take custom or Auto responsive

    Grid Settings: I try many numbers in the grid settings

    Responsive Sizes: Not sure how to work with them

    What I know, I want to have the maximum control on the visual on different phone — I’m ready to go a little farther to make it perfect, but not sure how ?

    Any Hints will be appreciated !   :)



  •  1,192
    Amit replied

    to make phone only slider you need to use css media query 

    you hide the slider on certian resolution and then show on other resolution

  • Patrick replied

    Yes, Thanks, I have no problem with that -  You can see a dummy site here with a slider for desktop replace by another one for phone —> http://www.grafcomm.ca/graf2

    My question was more about the Slider Layout, Grid Settings, Responsive Sizes settings. I’m not to sure how to target phone with the combination of those settings. One thing I know is that I want a lot of control on the final height and look of the slider.

    Can you give me some hint on those settings?

    By the way, you can see that  I made Retina ready Bullet for your slider.

    You just have to replace your own “bullet.png” in media —> com_unite…—>assets —>rs-plugin —> assets —> bullet.png 

    and add this css —> .tp-bullets.simplebullets.round .bullet {background-size:100% !important;}

    For you other graphics for navigation and all - Just double the size of your images and add the — background-size:100% — That’s it.

    After the same graphic work perfectly for desktop and mobile and retina and stay absolutely sharp and the same size that your original slider

    You can used if you want…. :)

  • Patrick replied

    This is the good png, the one I give you wasn’t transpparent

  •  1,192
    Amit replied

    hi patrick i dont understand your question but thanx for the bullet. 

    you are asking what exactly if you can write in short and not in long . think confusing me . 

  • Patrick replied

    Do you have a little bit more infos on those settings...

    Slider Layout: — I hesitate to take custom or Auto responsive

    Grid Settings: I try many numbers in the grid settings

    Responsive Sizes: Not sure how to work with them


  •  1,192
    Amit replied

    the best is to use auto responsive for a responsive slider. 

  • Eric replied

    I would make the bullets really big(2x -3x) then use css class to scale them down for retina. They will sharpen up.
    Or use an svg file.. We are using more and more svg as it provides a very clean edge and have a png swap on crappy old IE.
    SVG is our path back to vector that was disrupted by Apple not adopting flash swf

  •  1,192
    Amit replied

    ok we will definitly think about it thank you

  • Patrick replied

    “I would make the bullets really big(2x -3x) then use css class to scale them down for retina” This is what I did, I don’t know if the png I give you is correct, but you understand the idea…

    WE HAVE to adapt the design to be perfect on Retina and other high resolution technology ….

    About Mobile setting, Tell me if you think this good (I’m targeting phone only) ?

    Slider Layout: Auto Responsive

    Unlimited Height : Off

    Force full width : On

    Grid settings : width= 450 height 378

    So far so good

  •  1,192
    Amit replied

    looks ok . 

  • Patrick replied

    Closed

  • Patrick replied

    Try to closed the ticket

  • Patrick replied

    Closed now