Forums

JJ NextGen JQuery Carousel
Transparent Background (10 posts)

  1. rpmonteiro
    Member
    Posted 10 months ago #

    Is it possible to remove the background color and the border, so I can only have the images and the |next|previous| arrows?

    Thanks in advance! =)

    http://wordpress.org/extend/plugins/jj-nextgen-jquery-carousel/

  2. rpmonteiro
    Member
    Posted 10 months ago #

    Please someone help! :(

  3. kg69design
    Member
    Posted 9 months ago #

    It is very simple if you are familiar with CSS. So, just open CSS file of your wordpress theme and add some styles to it:

    .jcarousel-skin-tango .jcarousel-container {
    	background: none;
    	border: none;
    }

    That is all. Also you can do your own style for every element, just read this. You can add your own arrows and so on.

    If you still have some questions, write to me:
    My design project My email: kg69design@gmail.com

  4. dexter_ade
    Member
    Posted 2 months ago #

    Hi all does anyone know how I can make the rollover as seen in this example?

    http://sorgalla.com/projects/jcarousel/examples/dynamic_javascript.html

    I just approached the effect when the mouse pointer, please help

  5. kg69design
    Member
    Posted 2 months ago #

    Can you explain more? The rollover on image or on buttons?

  6. dexter_ade
    Member
    Posted 2 months ago #

    Hi kg69design The rollover on images, please help me, Thanks you.

  7. kg69design
    Member
    Posted 2 months ago #

    You can do it with css, something like this (add this code to your css file):

    li.jcarousel-item img {
    	transition: opacity 0.5s;
    	-moz-transition: opacity 0.5s;
    	-webkit-transition: opacity 0.5s;
    	-o-transition: opacity 0.5s;
    	opacity: 1;
    }
    li.jcarousel-item img:hover {
    	opacity: 0.6;
    	cursor: pointer;
    }

    Or if you want the same effect, try this code:

    li.jcarousel-item {
    	border: 1px solid #fff;
    }
    li.jcarousel-item:hover {
    	border-color: #808080;
    	cursor: pointer;
    }

    If something don't work, give a link to your project.

  8. imikedesigns
    Member
    Posted 2 months ago #

    .jcarousel-item {
        border: 1px solid #FFFFFF;
        height: 75px;
        width: 75px;
    }
    .jcarousel-item:hover {
        border: 1px solid #808080;
    }

    That's the css from the demo.

  9. dexter_ade
    Member
    Posted 2 months ago #

    hi kg69design I did the example below and stay cool also works very well, I did it up as localhost to my server it will share with you. thanks very much, God bless you

    img {li.jcarousel-item
    transition: opacity 0.5s;
    -moz-transition: opacity 0.5s;
    -webkit-transition: opacity 0.5s;
    -or-transition: opacity 0.5s;
    opacity: 1;
    }
    li.jcarousel-item img: hover {
    opacity: 0.6;
    cursor: pointer;
    }

  10. dexter_ade
    Member
    Posted 2 months ago #

    Hi imikedesigns thanks for you help, God bless you

Reply

You must log in to post.

About this Plugin

About this Topic